使用 justify-content: center 实现水平居中，需先设置父容器 display: flex；子元素无论宽度如何均可居中，若需垂直居中可添加 align-items: center。
使用 CSS Flex 布局实现水平居中非常简单，只需要在父容器上设置几个关键的 Flex 属性即可。下面介绍具体方法。
1. 使用 justify-content 实现子元素水平居中
当父容器启用 Flex 布局后，可以通过 justify-content: center 来让子元素在主轴（默认为横轴）上居中对齐。
示例代码：
HTML:
<div class="container">
<div class="item">居中内容</div>
</div>
CSS:
.container {
display: flex;
justify-content: center;
}
这样，.item 元素就会在其父容器中水平居中。
2. 父容器设置 display: flex 是前提
必须先将容器的 display 设置为 flex，才能使用 Flex 相关属性。否则 justify-content 不会生效。
立即学习“前端免费学习笔记（深入）”；
- flex 容器会创建一个弹性布局上下文
- 所有直接子元素自动成为 flex 项目
- 主轴默认方向是水平从左到右
3. 额外说明：是否需要设置宽度？
不需要给子元素设置特定宽度也能居中。无论子元素是固定宽度、自适应还是由内容撑开，justify-content: center 都能让它水平居中。
小提示：如果希望子元素也垂直居中，可以加上 align-items: center，实现完全居中。
基本上就这些，只要记住在父级开启 flex 并使用 justify-content: center，就能轻松实现水平居中。不复杂但容易忽略 display:flex 这一步。
