text-align: center只对行内内容生效，不能居中块级子元素；它作用于块级父容器内文字、span、img等行内级内容，对div、section等块级元素无效，且在flex/grid容器中冗余。
text-align: center 只对行内内容生效，别乱套在块级子元素上
很多开发者一看到“居中”就下意识给父容器加 text-align: center，结果发现里面的 div、section 一点反应都没有。这不是 CSS 失效，而是它压根不负责块级元素的水平位置。
这个声明只影响**行内级内容**：文字、span、默认 display: inline-block 的 img 和 button。它不管块级流，也不管 flex/grid 子项。
- ✅ 正确用法：父容器设
text-align: center，里面放img或span，它们会水平居中 - ❌ 错误用法：父容器设了
text-align: center，但子元素是div且没改display，它仍左对齐 - ⚠️ 注意：如果父容器用了
display: flex或display: grid，text-align对子元素完全无效
margin: 0 auto 必须满足三个硬条件，缺一不可
margin: 0 auto 看似简单，但失败率极高——不是写错了，而是漏了前提。
它只对**块级、非浮动、非绝对定位**的元素起作用，且依赖浏览器能算出左右剩余空间。这意味着：
- 子元素必须显式设置
width或max-width（否则默认 100%，无“居中”可言） - 父容器不能是
display: flex或display: grid（此时margin: auto被忽略，应改用justify-content） - 子元素不能有
float、position: absolute或display: inline
常见救急写法：input { display: block; width: 200px; margin: 0 auto; } ——三属性缺一不可。
Flex 居中要写在父容器上，且 height 必须可计算才能垂直生效
justify-content: center 和 align-items: center 是现代项目的主力方案，但它们的行为高度依赖上下文。
关键点不在子元素，而在父容器的渲染能力：
- 父容器必须设
display: flex，否则这两个属性毫无作用 -
align-items: center垂直居中依赖父容器有明确高度；如果父容器只有min-height或靠内容撑开，垂直方向可能“不动” - 若父容器是全屏布局，推荐用
height: 100vh；若嵌套在未知高度的容器里，得确保祖先链中有可测量高度 - IE10+ 支持
flex，但 IE10/11 对align-items: center在某些 flex-direction 下有 bug，稳妥起见可加flex-direction: column+justify-content: center替代
IE9 兼容场景下，绝对定位 + transform 是最稳的纯 CSS 方案
当项目必须支持 IE9（比如政务或金融类老系统），flex 和 grid 都不可用，table-cell 又太重，这时唯一靠谱的是：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
- ✅ 不依赖元素宽高，响应式友好
- ✅ IE9+ 全面支持
transform（包括带前缀的-ms-transform） - ⚠️ 注意：父容器必须设
position: relative，否则绝对定位会相对于 viewport 定位 - ⚠️ 注意：如果子元素是 SVG 或字体图标，
transform可能导致模糊，可加backface-visibility: hidden缓解
真正难的不是写出居中代码，而是判断当前环境是否允许你用 flex、是否需要兜底、以及父容器的高度是否真实存在——这些细节一漏，居中就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
