css中所有内容都居中

想让网页的内容更加美观、易于阅读，就需要掌握一些 CSS 布局技巧。其中，使内容居中是常用的一种。

接下来，我们将介绍如何使用 CSS 实现所有内容都居中的布局。

body {
    display: flex;
    justify-content: center;
    align-items: center;
} 

上面的 CSS 代码使用了 flex 布局，通过设置 container 的两个属性 justify-content 和 align-items，实现了所有内容都居中。

其中，justify-content 属性用于水平方向居中，有以下几种值可选：

• flex-start：左对齐；
• flex-end：右对齐；
• center：居中；
• space-between：两端对齐，项目之间的间隔相等；
• space-around：每个项目两侧的间隔相等。

align-items 属性用于垂直方向居中，有以下几种值可选：

• flex-start：顶部对齐；
• flex-end：底部对齐；
• center：居中；
• baseline：基线对齐；
• stretch：如果项目未设置高度或设为 auto，将占满整个容器的高度。

它们可以组合使用，设置成 center，就可以使内容完美居中了。如果只想让某个元素居中，也可以使用 margin 属性，设置它的值为 auto 即可：

.wrapper {
    width: 200px;
    height: 150px;
    margin: auto;
} 

上面的 CSS 代码中，.wrapper 是一个块级元素，通过设置 margin 的值为 auto，就可以实现该元素居中的效果。

在实际开发中，居中布局经常用到，可以让网页看上去更加整洁、舒适。想要掌握更多 CSS 技巧，建议多学习、多实践。