使用 display: flex 配合 justify-content: center 可高效实现子元素水平居中。1. 将父容器设置为 display: flex，使其子元素成为弹性项目。2. 通过 justify-content: center 控制主轴对齐，使子元素在横轴上居中排列。3. 该方法无需子元素固定宽度，兼容性好，适用于单个或多个子元素布局，可结合 align-items 实现垂直居中，且父容器需有足够宽度以确保效果明显。
要让父容器内的子元素水平居中，使用 display: flex 配合 justify-content: center 是一种现代且高效的 CSS 方法。这种方法适用于块级元素、行内元素或未知宽度的元素，都能轻松实现居中对齐。
1. 设置父容器为 Flex 布局
将父元素的 display 属性设置为 flex，使其成为弹性容器。这样它的直接子元素会变成弹性项目，可以使用 flex 相关属性进行布局控制。
示例代码：
.container {
display: flex;
}
2. 使用 justify-content: center 实现水平居中
justify-content 控制主轴（默认是横轴）上的对齐方式。设置为 center 可使子元素在主轴上居中排列。
立即学习“前端免费学习笔记（深入）”；
完整示例：
.container {
display: flex;
justify-content: center;
}
.item {
/ 子元素无需特殊设置宽度 /
}
HTML 结构：
居中内容
3. 注意事项与适用场景
该方法具有良好的浏览器兼容性和灵活性，适合大多数现代网页布局需求。
- 适用于单个或多个子元素的水平居中
- 不需要知道子元素的宽度
- 可与其他 flex 属性（如 align-items）结合实现垂直居中
- 注意父容器要有足够的宽度，否则居中效果可能不明显
基本上就这些，简单有效。
