最可靠方式是父容器设 display: flex 和 justify-content: center；单个块级子元素常加 align-items: center 垂直居中；text-align: center 仅对行内内容有效，需配合 inline-block 才能居中块级元素；margin: auto 需明确宽度且不适用于浮动或绝对定位元素。
flexbox 实现块级元素水平居中（最可靠）
用 display: flex 配合 justify-content: center 是目前最通用、最可控的方式，适用于任意子元素（文本、图片、div、按钮等），且不依赖元素是否为行内或块级。
关键点在于父容器必须显式设为 flex 容器，并控制主轴对齐：
- 父元素加
display: flex和justify-content: center - 若子元素是单个块级元素（如
div），通常还需加align-items: center保证垂直居中（非必需，但常一起用） - 避免给子元素设
margin: auto冗余写法——flex 下它可能生效，但语义不清，易和绝对定位混淆 - 注意：若父容器宽度未占满，flex 居中仍以父容器内容区为基准，不是整个视口
.container {
display: flex;
justify-content: center;
}
.item {
width: 200px;
height: 100px;
}
text-align: center 只对行内内容有效
text-align: center 本质是**文本对齐属性**，只影响其子元素中的**行内级内容**（如文字、span、img 默认行为），对块级元素（如 div、p）本身无效——除非你把它变成行内块。
常见误用场景：
- 直接对包含
div的父容器设text-align: center，但子div没加display: inline-block→ 不居中 - 忘记清除子块级元素的默认
display: block行为 - 在 flex 或 grid 容器里还加
text-align: center→ 多余，甚至干扰布局逻辑
正确用法示例（仅当真需要兼容老浏览器或极简场景）：
.container {
text-align: center;
}
.container > div {
display: inline-block;
width: 200px;
}
为什么不能只靠 margin: auto？
margin: 0 auto 确实能让块级元素水平居中，但它有硬性前提：元素必须有**明确宽度**（width 或 max-width），且不能是 float 或 position: absolute 元素。
实际踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 对
display: inline或display: inline-flex元素设margin: auto→ 无效 - 父容器是
position: relative，但子元素用了position: absolute→ 必须配合left: 50%+transform: translateX(-50%)，此时margin: auto不起作用 - Flex 容器中对子项设
margin: auto会覆盖justify-content，属于高级技巧，但可读性差，不推荐作为居中首选
选哪个？看场景和兼容性要求
现代项目（支持 IE11+）优先用 flex；老项目需兼容 IE9 或更低，才考虑 text-align + inline-block 组合。
flex 的优势是语义清晰、响应式友好、可同时处理多子项分布；而 text-align 方案容易因 display 类型错配失效，调试时得反复检查计算后的 display 值。真正容易被忽略的是：居中效果是否随内容动态变化（比如文字换行、图片加载失败、字体加载延迟）——flex 在这些边界情况下依然稳定，text-align 则可能突然“偏移”。
