首选 display: flex（父容器设 display: flex、justify-content: center、align-items: center）；次选 absolute + margin: auto（父 relative，子 absolute 撑满后 margin: auto）；table-cell + vertical-align 适用于表格和单行内联内容；line-height 仅限固定高度单行文本，鲁棒性最差。
绝大多数情况下，用 display: flex 最省事也最可靠；但如果你要居中的不是块级容器里的子元素，而是表格单元格或单行文本，就得换思路。
flex 布局：父容器加三行 CSS 就搞定
这是现代项目首选方案，兼容性已覆盖所有主流浏览器（包括 Edge 12+、Chrome 29+、Firefox 28+）。关键不是“怎么写”，而是“写在哪”——必须作用于父容器，且子元素不能有 float 或 position: absolute 干扰布局流。
-
display: flex是前提，没有它，后面两个属性无效 -
justify-content: center控制水平居中 -
align-items: center控制垂直居中（注意：只对 flex 项目生效，不是全局样式） - 如果子元素是文字而非盒子，仍需确保父容器有明确高度（比如
height: 300px），否则可能撑不开
绝对定位 + margin: auto：适合未知宽高的弹窗类元素
当你无法控制子元素尺寸（比如用户上传的图片、动态生成的卡片），又不想用 JS 计算偏移时，这个组合比 top: 50%; left: 50%; transform: translate(-50%, -50%) 更稳——它不依赖子元素尺寸，也不怕缩放失真。
- 父容器必须设
position: relative（或absolute/fixed）作为定位上下文 - 子元素设
position: absolute，再写top: 0; right: 0; bottom: 0; left: 0;把它“撑满”父容器 - 最后加
margin: auto，浏览器会自动计算居中所需的外边距 - 这个技巧在 modal、loading 指示器等场景里非常实用
table-cell + vertical-align：专治表格和单行内联内容
vertical-align: middle 看似简单，但只对 display: table-cell、inline、inline-block 等元素生效。直接给 div 设它没用，很多人卡在这儿。
- 把父容器设为
display: table-cell，同时配width和height（或让其被内容撑开） - 加上
vertical-align: middle和text-align: center（后者管水平） - 若父容器是
table或td，默认就是table-cell，直接加vertical-align即可 - 注意：不要给
table-cell元素设margin，它会被忽略
line-height hack：仅限单行纯文本，慎用
用 line-height 等于容器高度来“骗”浏览器把文字垂直居中，看似简洁，但极易翻车：
- 只适用于单行文本，换行后全部错位
- 字体大小变化、行高继承、内联元素嵌套都会破坏效果
- 如果容器高度是百分比或由内容撑开，
line-height就失去意义 - 真正要用的话，必须确保容器有固定像素高度，且子元素是纯文本或
span等内联元素
最容易被忽略的一点：居中效果是否随视口缩放、字体放大或暗色模式切换而失效？flex 和 absolute + margin: auto 这两类方案对这些场景更鲁棒；而 line-height 和 transform 类方法，在用户调整系统字体大小时容易偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
