text-align: center仅对行内及行内块元素有效，块级元素需用margin: 0 auto（需显式width+块级显示）或Flex布局；Flex最通用但需兼容IE前缀；绝对定位+transform适用于脱离文档流的居中场景。
text-align: center 什么时候能用、什么时候会失效
它只对行内内容起作用：文字、<span>、<img>（默认 inline）、<button>（默认 inline-block）等。只要这些元素没脱离文档流，父容器设 text-align: center 就能水平居中。
常见失效场景：
- 子元素是
display: block的<div>，哪怕只有一行文字，也不会被居中； - 父容器没设宽度，或子元素宽度撑满父容器，视觉上“看不出”居中；
- 子元素用了
float或position: absolute，脱离文档流后text-align完全无效。
补救方式：对块级子元素单独设 margin: 0 auto，或改用 Flex。
margin: 0 auto 必须满足的两个硬性条件
这个写法看着简单，但漏掉任一条件就完全不生效：
立即学习“前端免费学习笔记（深入）”；
-
width必须显式设置 —— 比如width: 300px或max-width: 80%，不能是width: auto（默认值）； - 元素必须是块级（
display: block），或强制设为块级 ——<img>要加display: block，<button>默认 inline，也得加display: block。
注意：margin: 0 auto 只管水平居中，垂直方向毫无影响；它也不支持多子元素并排居中（会堆成一列）。
Flex 布局为什么是首选，但要注意兼容边界
真正“万能”的居中方案是父容器设：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
优势很实在：
- 子元素宽高未知、响应式缩放、甚至动态插入新元素，都不影响居中效果；
- 支持多个子元素同时居中排列（比如图标+文字+按钮横向居中）；
- 不用操心
position、transform等组合逻辑，代码干净。
但别忽略现实约束：
- IE10–IE11 需要加
-ms-前缀（display: -ms-flexbox）； - IE9 及以下完全不支持，必须降级到
position: absolute + transform或table-cell； - 如果父容器本身是
position: fixed或高度由内容撑开，记得确保它有明确高度（比如min-height: 100vh），否则align-items: center可能没效果。
绝对定位 + transform 居中不是“备选”，而是特定场景刚需
当你需要一个模态框、提示气泡、加载遮罩层这类脱离文档流的元素时，position: absolute + transform: translate(-50%, -50%) 不是退而求其次，而是最合理的选择。
关键点：
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%是相对于 viewport 计算的； -
transform是必需的 —— 单靠top: 50%; left: 50%只会让元素左上角在中心，必须用translate(-50%, -50%)把自身回拉一半； - 这个方案对子元素尺寸完全无要求，连
width和height都可以不设（适合内容动态生成的弹窗）。
容易被忽略的是：如果父容器有滚动条，且子元素用了 position: fixed，那它会固定在视口而非父容器内，此时要换回 absolute 并确保父容器可滚动且设了 position: relative。
