text-align: center只对行内内容生效，作用于块级容器内的文本、span、img等行内元素，不能居中块级子元素本身；其本质是文本排版属性，非布局定位属性。
text-align: center 只对行内内容生效，不是“让元素居中”，而是“让元素内部的文本、图片等行内内容居中”——这是面试时最容易答错的第一点。
为什么 text-align: center 不能居中块级元素本身
它作用对象是块容器内的**行内流内容**（如文字、span、img），不改变块级子元素（如另一个 div）的位置。如果父容器没设宽度、或子元素是 div 且未设 display: inline-block，text-align 完全无效。
- 错误写法：
div { text-align: center; } <div><div>我不会被居中</div></div> - 正确理解：
text-align不是布局属性，它属于“文本排版”范畴，和line-height、letter-spacing同类 - 兼容性虽好（IE6+），但语义上不该用于控制块级结构定位
margin: 0 auto 居中的三个硬性前提
这个写法看似简单，但缺一不可，否则在面试手写时会被当场追问“为什么没效果”：
- 元素必须是**块级元素**（
display: block或默认块级标签如div） - 元素必须有**明确的宽度**（
width值不能是auto，也不能是百分比但父容器无宽） - 元素不能是
float、position: absolute/fixed或display: inline等脱离常规文档流的状态
常见翻车现场：div { margin: 0 auto; } 却没写 width，或者把 margin: 0 auto 加在 span 上还纳闷为啥不动。
Flex 布局居中必须配齐的两个声明
只写 display: flex 不等于居中；只写 justify-content: center 只能水平居中。面试手写常考“水平+垂直居中”：
-
justify-content: center控制主轴（默认为 x 轴）居中 -
align-items: center控制交叉轴（默认为 y 轴）居中 - 二者缺一，就只是单向居中；若容器高度未定义（如没设
height或min-height），align-items在无高度约束下可能无视觉变化
注意：flex 在 IE10+ 需加 -ms- 前缀，但现代面试已基本不考兼容，重点在逻辑是否闭环。
绝对定位 + transform 的偏移陷阱
这种写法在面试中很受欢迎，因为它体现对坐标系和渲染机制的理解，但容易漏掉关键细节：
- 父容器必须是
position: relative（或absolute/fixed），否则left: 50%是相对于初始包含块（通常是 viewport） -
transform: translateX(-50%)只解决水平；垂直需补top: 50%+transform: translateY(-50%)，或合写为transform: translate(-50%, -50%) -
translate是相对于自身尺寸计算，不是父容器，所以无需知道宽高——这点常被忽略，却是它比margin-left: -宽/2更鲁棒的核心原因
真正难的不是写出来，而是在白板上解释清楚：为什么是 -50%，而不是 -100% 或其他值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
