用 display: flex 居中需父容器设 display: flex、justify-content: center、align-items: center 且有高度；position: absolute + transform 更适合脱离文档流场景，需父容器 position: relative。
用 display: flex 一行搞定居中，但得设对父容器
元素不居中？大概率是父容器没设 display: flex，或者忘了加 justify-content 和 align-items。这两个属性必须同时存在，缺一不可。
常见错误：只写 display: flex，结果元素还是靠左顶上；或者把这两个属性写在子元素上——没用，它们只作用于 flex 容器本身。
- 父元素必须显式声明
display: flex - 加上
justify-content: center（水平居中） - 加上
align-items: center（垂直居中） - 如果父元素没高度，比如
div默认高度为 0，那垂直居中就“没地方可居”——得给父元素设height或min-height，比如min-height: 100vh
position: absolute + transform 适合脱离文档流的场景
当元素需要脱离正常布局（比如弹窗、提示气泡），或父容器不能/不便改 flex 布局时，这套组合更稳妥。
关键点在于：top: 50% 和 left: 50% 把元素左上角拉到中心，再用 transform: translate(-50%, -50%) 回退自身宽高的一半——这才是真正居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
position: relative（否则absolute会往上找最近的定位祖先，可能跑到 body 上） -
transform的百分比是相对于元素自身宽高，不是父容器，所以-50%才能抵消 - 别用
margin: -XXpx硬算，宽高一变就偏移
别碰 text-align: center + line-height 这套老方案
它只能“假装”居中：仅对单行内联元素（如 span、img）有效，且依赖固定高度。一旦内容换行、字体缩放、或父容器高度动态变化，立刻失效。
典型翻车现场：line-height: 200px 配 height: 200px，看着居中了，但用户缩放页面后文字溢出，或者加个 padding 就错位。
- 纯文本单行？可以临时用，但不是通用解法
- 含块级子元素（如嵌套
div）、响应式需求、或需要支持 zoom 的场景，直接弃用
移动端要注意 viewport 和缩放行为
在 iOS Safari 或某些安卓浏览器里，即使代码完全正确，也可能因视口设置或双击缩放导致视觉偏移。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则100vh可能被浏览器地址栏撑高 - 用
min-height: 100vh比height: 100vh更安全，避免内容超长时父容器塌陷 - 如果用了
transform方案，在旧版 Android WebView 中可能触发渲染 bug，加translateZ(0)强制硬件加速（transform: translate(-50%, -50%) translateZ(0)）
