用 display: flex + justify-content: center + align-items: center 实现水平垂直居中，但父容器必须设置可计算高度（如 min-height: 100vh），否则 align-items: center 因交叉轴无尺寸而静默失效；子元素不能脱离文档流，且需注意 flex-direction 变化时属性作用轴互换。
直接给结论：用 display: flex + justify-content: center + align-items: center，再配上 height: 100vh，三行 CSS 就能稳稳居中，零基础也能抄着跑通。
父容器必须设高度，否则 flex 居中无效
很多人写了 flex 却没效果，问题几乎都出在这儿——div 默认是“内容撑开高度”，没高度就谈不上垂直居中。
- 必须给父容器（比如
<body>或外层<div class="container">）加height: 100vh（视口高度），或min-height: 100vh更稳妥 - 如果父容器被其他样式干扰（比如
float、position: absolute），flex 会失效；检查开发者工具里 computed styles 确认 display 和 height 是否生效 - 别在
<body>上直接写 flex —— 默认有 margin，先清掉：body { margin: 0; }
text-align: center 不等于整页居中
text-align: center 只控制**块级容器内联内容的水平对齐**，它不管垂直方向，也不影响块级子元素本身的位置。
- 对单行文字有效，但对
<div>、<img>、<button>这类块级元素无效 - 如果误以为给
<body>加text-align: center就能居中整个页面，结果只会看到文字居中、其他元素还卡在左上角 - 真要用它，得配合
line-height: 100vh（仅限单行文本），但一旦换行或字号变化，立刻错位
绝对定位 + transform 是兼容兜底方案
如果你项目要支持 IE11 或老版 Safari，flex 可能不稳，这时用 position: absolute + transform: translate(-50%, -50%) 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（否则top: 50%会相对于整个 viewport 定位，偏到天边） - 子元素写法固定：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 不用算宽高，
translate的百分比永远基于自身尺寸，哪怕文字缩放、响应式变宽也照样居中 - 注意：如果子元素里还有
transform: scale()或rotate()，得合并写，比如transform: translate(-50%, -50%) scale(1.2)，否则顺序错乱会导致偏移
别碰 margin: auto 配合四边定位
这个写法看着简洁：position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;，但实际坑多，零基础容易卡死。
- 子元素必须有明确的
width和height（不能是%、max-width或fit-content） - Safari 15.4 之前版本对这个组合支持异常，可能左右差几个像素
- 文字内容宽度随字号/语言动态变化，根本没法写死 width，所以它只适合图标、加载 spinner 这类尺寸固定的元素
- 新手常漏写四边定位（比如只写
top和left），结果margin: auto完全不触发
真正零基础起步，就老老实实用 flex：确认父容器有 height: 100vh、没浮动、没绝对定位干扰，一行 display: flex 带两个 center 就完事。复杂点在于容器上下文是否干净，而不是居中逻辑本身。
