没有“唯一规范”，只有“场景适配”：text-align:center作用于父元素内的行内内容；margin:0 auto需块级+定宽+无浮动/定位；Flex居中样式必须写在父容器上；line-height仅适用于单行固定高文本。
直接给结论：没有“唯一规范”，只有“场景适配”。写法是否规范，取决于你要居中的元素类型、浏览器兼容要求、是否需响应式，以及是否要同时处理水平和垂直方向。
text-align: center 只对父容器生效
这是最常被误用的点——很多人给 <div> 自己加 text-align: center，结果文字没动。它只作用于**行内内容**（文字、<img>、<span> 等），且必须设在**父元素**上。
- 适用场景：段落、标题、图片链接等行内级内容的水平居中
- 不适用：块级
<div>、<section>自身居中（除非先转成display: inline-block） - 常见错误：
<div style="text-align: center"><div>子div</div></div>—— 子<div>不会居中，因为它是块级，不受text-align影响 - 正确写法：
<div style="text-align: center"><p>这段文字居中</p><img src="x.jpg" style="display: inline-block"></div>
margin: 0 auto 要求明确 width + 块级 + 非定位
这是块级元素水平居中的经典方案，但限制条件比想象中多。
- 必须设置
width（或max-width），否则auto无法计算剩余空间 - 元素必须是块级（
display: block或默认块级），<img>默认是行内，得先加display: block - 不能有
float、position: absolute或position: fixed，否则margin: auto失效 - 示例：
<div style="width: 300px; margin: 0 auto; border: 1px solid #000">我居中了</div>
Flexbox 居中要写对父容器，不是子元素
几乎所有 Flex 居中失效的问题，都源于把样式加错了地方。
立即学习“前端免费学习笔记（深入）”；
- 关键：所有居中逻辑（
justify-content、align-items）必须写在**父容器**上，子元素不需要任何居中相关 CSS - 水平居中：
display: flex; justify-content: center; - 垂直居中：
display: flex; align-items: center; - 双向居中：
display: flex; justify-content: center; align-items: center; - 注意：父容器需有明确高度（如
height: 200px或min-height: 100vh），否则align-items: center在高度未定义时可能无视觉变化
垂直居中别硬套 line-height，单行文本才安全
line-height 设为和容器高度相等，确实能让单行文字垂直居中，但极易翻车。
- 仅适用于纯文本、单行、且高度固定的情况
- 一旦文字换行、或容器高度响应式变化（比如
height: auto），line-height就完全失控 - 不适用于
<span>等行内元素（它本身没高度，line-height作用范围有限） - 替代方案更可靠：Flex（
align-items: center）、Grid（place-items: center）、或绝对定位 +transform: translate(-50%, -50%)
真正容易被忽略的是：居中从来不是孤立操作。它总依赖上下文——父容器的尺寸是否已知、子元素是否流式、是否要兼容 IE11、是否要支持缩放或字体放大。写代码前，先确认这三点，比背口诀管用得多。
