最可靠方案是给容器设display: flex和justify-content: center，仅作用于直接子元素主轴（默认水平），需确保容器有宽度、子元素无float/margin干扰；同时垂直居中加align-items: center。
让子元素在容器中水平居中（flex 方案）
直接给容器加 display: flex 和 justify-content: center 就行，这是最可靠、兼容性足够（Chrome 21+/Firefox 20+/Safari 6.1+）的现代方案。
注意：这个居中只作用于主轴（默认是水平方向），且只影响**直接子元素**，不递归作用于孙子节点。
div.container {
display: flex;
justify-content: center;
}
- 如果容器有固定宽高，子元素会严格水平居中；若子元素本身 width: 100%，看起来没变化——其实是居中了，只是占满整行
- 别忘了清除子元素可能自带的
margin或float，否则会影响布局表现 - 如果子元素是行内元素（比如
），它会被当作 flex item 处理，无需额外设display: block
为什么不用 text-align: center？
常见误用场景： 立即学习“前端免费学习笔记（深入）”； Flex 居中失效，90% 是因为下面几个低级但难察觉的问题： Flex 天然支持二维居中，只要主轴和交叉轴都设置好对齐方式： 注意：text-align: center 只对**行内内容**（文本、 等）有效，对块级元素（如 ）无效——除非你把它变成 inline-block 或用其他 hack。
text-align: center 套在父容器上，里面放一个 width: 200px 的
text-align 的：纯文字、图标字体、单张图片等行内级内容flex 的：任意结构的子元素，尤其是需要同时控制水平+垂直居中的时候justify-content: center 不生效？检查这几点
display: flex —— 仅写 justify-content 没用，它不是独立属性float: left/right —— Flex item 会忽略 float，但旧代码残留容易让人误判margin: auto 且容器是 block 布局 —— 这时 margin: auto 会抢占行为，和 flex 冲突0 或被压缩（比如父级 white-space: nowrap + 子元素过宽）—— flex 容器得有可分配空间才能居中想同时水平+垂直居中？加一行 align-items
div.container {
display: flex;
justify-content: center;
align-items: center;
}
align-items: center 默认按容器高度居中，所以容器最好有明确高度（height、min-height 或由内容撑开）。如果容器高度为 auto 且子元素又没撑高，它就只能按“内容高度”居中，视觉上可能偏上。
flex 居中看着简单，实际最容易栽在容器尺寸、子元素 display 类型和旧样式残留上。动手前先用浏览器 devtools 看一眼 computed 样式里 min-height: 100vh 强制视口高度align-items: center 仍有效，但要注意 line-height 干扰align-items 支持有 bug，若需兼容，建议加 -ms-flex-align: center
display 是否真成了 flex，比猜强得多。
