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