居中需按场景选方法：text-align: center 仅对行内元素有效；margin: 0 auto 要求块级+明确宽度；flex 需 display: flex+高度；grid 用 place-items: center。
没有“黑科技”，只有选对方法。居中不是炫技，而是匹配场景：文本、块级、未知尺寸、响应式、可访问性——每种需求对应一个最稳解法。
text-align: center 只对行内内容生效
它让文字、<img>、<span> 这类默认行内或行内块元素水平居中，但对 <div>、<p> 等块级子元素完全无效。
- 父元素加
text-align: center即可，无需其他样式 - 若子元素是块级且设置了
display: block，它仍会独占一行、左对齐——这不是 bug，是规范行为 - 常见误用：给父容器设了
text-align: center，又给子<div>加margin: 0 auto，两者不冲突但后者才真正起作用
margin: 0 auto 要求块级 + 明确宽度
这是唯一能纯靠盒模型实现的水平居中方案，但有两个硬条件缺一不可：display 是块级（或 inline-block），且必须有 width 或 max-width。
-
margin: 0 auto对垂直方向无效，margin-top: auto在非 flex/grid 容器里会被忽略 - 如果父容器是
display: flex，margin: auto会接管交叉轴对齐，此时可能意外垂直居中——这不是预期行为，建议显式用align-items - Safari 中混用
margin: auto和align-items: center可能导致上下偏移，务必避免
flex 布局居中必须满足两个前提
justify-content: center 和 align-items: center 看似简单，但失效往往是因为父容器没真正进入 flex 上下文。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须设
display: flex（或inline-flex），仅设对齐属性无效 - 父容器需有明确高度：要么写死
height: 400px，要么用min-height: 100vh，否则align-items: center没参考长度 - 子元素若为
display: block且宽度 100%，不影响垂直居中，但容易让人误判为“没生效” - 不要在 flex 容器里再给子元素设
margin: auto，语义重叠且易出兼容问题
place-items: center 是 Grid 的极简开关
一行代码搞定水平+垂直居中，但它只在 display: grid 容器下有效，且对所有直接子元素生效。
- 不需要指定
grid-template-areas或轨道，place-items: center自动作用于每个子项 - IE11 不支持
place-items，回退方案是justify-items: center; align-items: center - 如果父容器已定义复杂网格结构（比如多列+命名区域），加
place-items可能覆盖原有对齐逻辑，要小心叠加 - 它不处理子元素自身的内容居中（比如子
<div>里的文字），那是子元素自己的事
真正容易被忽略的点是：居中永远不是孤立操作。它依赖父容器的定位方式、高度来源、文档流状态，甚至子元素的 display 类型。写完居中样式后，先检查父容器是否“有高度”、是否“真 flex”、是否“脱离文档流”，比反复调 margin 更快定位问题。
