text-align: center 仅对直接行内内容生效，不作用于块级子元素；正确做法包括设子元素为 inline-block、margin: 0 auto（需显式宽）、flex + justify-content: center（推荐流式场景）、absolute + transform（适合脱离文档流），或 line-height（限单行固定高）。
text-align: center 对行内内容生效，不是对块级子元素
很多人给父容器加 text-align: center，发现里面一个 div 没动——因为这个属性只作用于它的**直接行内内容**，比如文字、span、img（默认 inline），不作用于块级子元素本身。
当内部字数变化（比如“提交” vs “确认提交并同步至云端”），如果子元素是块级且没设宽，它仍会左对齐撑满；哪怕父容器居中了，它自己没“参与居中计算”。
- 正确做法：让目标子元素变成
inline-block，再靠父容器的text-align: center居中 - 或者改用
margin: 0 auto，但必须显式设width或max-width（不能是100%） - 若子元素是按钮或卡片类组件，更推荐用
display: flex父容器 +justify-content: center
flex 布局下子元素宽度动态时仍能居中
justify-content: center 不依赖子元素尺寸，字数增减导致宽度变化时，居中逻辑依然有效。这是它比 margin: 0 auto 更适合流式文本场景的关键原因。
但要注意：如果子元素本身设了 width: 100%，它会撑满父容器，justify-content 就没空间可居中了。
立即学习“前端免费学习笔记（深入）”；
- 避免在 flex 子项上写
width: 100%，除非你明确要它占满 - 多行文本建议包一层
div并设display: inline-block或直接让 flex 子项是span类行内元素 - IE10/11 需加
-webkit-前缀，display: -webkit-flex和-webkit-justify-content: center
绝对定位 + transform 在响应式字数下依然稳定
当字数频繁变化、又需要脱离文档流（比如气泡提示、浮动操作按钮），position: absolute 配合 transform: translate(-50%, -50%) 是最可靠的全向居中方式——它不读取子元素当前宽高，纯靠偏移计算。
但漏掉任何一环都会失效：父容器没设 position: relative，就会相对于视口定位；没写 top: 50%; left: 50%，transform 就没基准点。
- 必须确保父容器有非
static的定位上下文（relative最常用） -
transform: translate(-50%, -50%)是核心，不是可选；只写translateX(-50%)只水平居中 - 字体缩放或 viewport 变化时，它仍能保持居中，但频繁触发重排可能影响性能
line-height 居中在字数变化时容易失效
单行文本用 line-height 等于容器高度来垂直居中，前提是内容**严格单行且高度固定**。一旦字数增加导致换行，line-height 就变成行间距，文字整体会上浮或溢出。
响应式字号（如 rem 或 vw）会让 line-height 计算变复杂，稍有不慎就错位。
- 仅适用于按钮、标签等高度可控、内容极简的场景
- 多行或不确定字数的文本，必须换方案：flex 或 table-cell（后者兼容性好但语义差）
- 别在
line-height里混用单位（比如line-height: 2em+height: 40px），计算逻辑不一致
height，align-items: center 就无效；margin: 0 auto 的父容器如果高度塌陷，元素看着像没居中，其实是父容器本身没占位。 
