最直接可靠的居中方案是display: flex + justify-content: center + align-items: center，它不依赖子元素尺寸与父容器定高，适用99%常规场景；而margin: auto仅限块级、定宽、非脱离文档流元素，兼容性与通用性远不如flex居中。
现代项目里，display: flex + justify-content: center + align-items: center 是最直接、最可靠的居中组合，无需知道子元素尺寸，也不依赖父容器是否定高，99% 的常规场景用它就够了。
flex 居中为什么比 margin: auto 更通用
传统 margin: 0 auto 只能水平居中块级元素，且必须满足三个硬条件：元素是 display: block、有明确 width（不能是 100% 或 auto）、未脱离文档流。一旦父容器是 display: flex 或 display: grid，这个声明就完全失效。
-
display: flex不挑子元素类型——div、img、button、甚至span（设display: block后）都能居中 - 不依赖子元素宽高，响应式下依然稳定
- 加一行
min-height: 100vh就能让内容始终在视口中央，比如计算器、登录框这类全屏组件 - 注意副作用：父容器开启 flex 后，子元素的
float、vertical-align和部分margin行为会失效
绝对定位 + transform 居中适合什么场景
当元素需要脱离文档流（如模态框、tooltip、遮罩层），又必须精确居中时，position: absolute 配合 transform: translate(-50%, -50%) 是目前最稳妥的选择。
- 父容器必须设
position: relative（或其他非static值），否则top: 50%会相对于视口计算，滚动时偏移 -
transform是关键：它基于自身尺寸计算，不需要提前知道宽高，比写死margin-top: -50px安全得多 - IE9+ 原生支持，但旧版 Safari 需加
-webkit-transform前缀 - 常见错误：只写
left: 50%; top: 50%，结果元素左上角在中心点，右下部分溢出
text-align: center 和 line-height 居中仅限文本类内容
对纯文字、span、a 或设为 display: inline-block 的图片，text-align: center 才真正起作用；试图给它们加 margin: 0 auto 或 justify-content 是无效的。
-
text-align: center必须写在父容器上，不是子元素上 - 单行文本垂直居中靠
line-height等于容器高度，多行文本得用 flex 或 grid - 图片作为行内元素，默认会受
line-height和vertical-align影响，设display: block后才能用margin: 0 auto - 如果父容器用了
display: flex或display: grid，text-align对子元素的水平对齐可能被忽略
真正容易被忽略的是父容器的“上下文”：flex 和 grid 会接管对齐逻辑，text-align 和 margin: auto 在它们内部基本失效；而绝对定位又极度依赖父容器是否设置了定位上下文。选哪种方案，本质是在选布局模型，不是单纯套个 CSS 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
