最可靠方案是 display: flex + justify-content: center + align-items: center，父容器设 flex，子元素自动居中，不依赖宽高且不脱离文档流；其他方案如 transform+absolute 为降级选择，margin:auto 等存在较多限制。
直接用 display: flex + justify-content: center + align-items: center 是当前最可靠、最省心的方案。其他方法要么限制多，要么兼容性差，要么容易踩坑。
flex 实现水平垂直居中（推荐首选）
父容器设为 flex，子元素自动居中，不依赖宽高，不脱离文档流，代码干净。
- 必须给父元素加
display: flex，不能只写inline-flex（否则align-items在某些旧版 Safari 中可能失效） -
justify-content: center控制主轴（默认横轴）居中，align-items: center控制交叉轴（默认竖轴）居中 - 若子元素是多行文本或多个块，且希望每行/每个块都独立居中，不用额外操作；但若想让多行整体在容器中垂直居中（而非每行贴着顶部），需确保父容器有明确高度，且未设置
flex-wrap: wrap干扰对齐逻辑 - IE10–IE11 需加
-ms-前缀：justify-content: -ms-center和align-items: -ms-center（实际项目中建议用 Autoprefixer 自动处理）
transform + absolute 实现不定宽高居中
当无法修改父容器 display 类型（比如第三方组件封装死、不能加 flex），又不知道子元素宽高时，这是最稳妥的降级方案。
- 父容器需设
position: relative，子元素设position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%) - 注意：
translate的百分比是相对于自身宽高，不是父容器——这点和margin或top/left完全不同，容易混淆 - IE9+ 支持，无需前缀；但若子元素含 CSS 动画，
transform可能触发重排，性能略低于 flex - 慎用于表单控件（如
<input>、<select></select>），某些安卓 WebView 下transform会导致光标定位异常
absolute + margin: auto 的陷阱
这个写法看着简洁，但实际限制极多，新手容易误用。
- 必须同时满足四个条件：父容器
position: relative、子元素position: absolute、且top/right/bottom/left全设为0、子元素**必须有明确宽高** - 一旦子元素宽高是
max-content、fit-content或由内容撑开（如文字换行），margin: auto就会失效，元素可能被拉伸填满整个父容器 - 在 Safari 15.4–16.3 中，该组合在某些 flex 父容器内存在渲染 bug，居中偏移几个像素
- 不推荐用于响应式场景——因为宽高固定后，缩放或 viewport 变化时容易溢出或留白
line-height / table-cell 等老方案为什么现在少用了
它们没消失，只是适用面太窄，强行套用反而增加维护成本。
-
line-height只对单行行内元素有效，多行文本会把行距撑得巨大，vertical-align: middle对块级子元素完全无效 -
display: table-cell要求父容器先设display: table，而 table 渲染机制与 flex/grid 不兼容，嵌套时易出现高度塌陷或 margin 合并异常 - 伪元素 +
vertical-align写法冗长，且对子元素的display类型敏感（必须是inline或inline-block），现代项目里基本被 flex 替代 - 这些方案在 SSR（服务端渲染）或微前端沙箱环境里，CSS 作用域隔离不严时，容易污染全局样式
真正要注意的其实是「居中目标是否动态变化」：如果子元素是图标、加载动画这类固定尺寸内容，flex 或 transform 都很稳；但如果它要容纳用户输入的富文本、可折叠列表、甚至 iframe，就得提前确认父容器能否提供稳定高度，否则 align-items: center 可能表现为空白区域过大或截断——这不是居中逻辑的问题，而是布局前提没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
