17370845950

单行文本用line-height最快，块级元素用flex最稳妥，绝对定位适合脱离文档流场景，vertical-align不适用于块级元素。

单行文本用 line-height 最快，但只适用于固定高度容器

当容器高度已知且内容仅为单行文字时，line-height 等于容器高度是最轻量的方案。它依赖行内元素的基线对齐机制，本质是拉伸行框高度来“挤”出居中效果。

• 必须确保内容不换行，否则多行会撑高容器，line-height 失效
• 容器需设置明确的 height，不能是 auto 或由内容撑开
• 文字颜色、字体大小不影响居中逻辑，但若设置了 vertical-align（如 top），可能干扰表现

.box {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

块级元素用 flex + align-items 最稳妥

对任意子元素（div、img、section等）做垂直居中，现代布局首选 display: flex。它不依赖高度预设，也不要求子元素尺寸已知，兼容性覆盖所有主流浏览器（IE11+ 支持基本用法）。

• 父容器设 display: flex 和 align-items: center 即可垂直居中
• 若还需水平居中，加 justify-content: center
• 注意：IE10–IE11 对 flex 的某些属性（如 flex-wrap）支持不全，但单层居中无问题
• 避免在父容器上同时使用 height: 100% 且未给祖先设高度——这会导致计算失败，显示为 0

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px; /* 需有有效高度 */
}

position: absolute + transform 适合脱离文档流场景

当子元素需要脱离正常流（比如遮罩层、弹窗、图标叠加），且父容器已设 position: relative，可用绝对定位配合位移实现居中。关键在于用 transform: translate(-50%, -50%) 抵消自身宽高的 50%，而非依赖 top/left 百分比（后者以父容器为基准，不能自动适配子元素尺寸）。

• 必须同时设置 top: 50% 和 left: 50%，再用 transform 回拉
• 子元素无需设定宽高，transform 会动态计算偏移量
• 若父容器高度为 auto，此法仍有效；但若父容器无高度限制且子元素又很大，可能溢出不可见
• 旧版 Android WebView（4.3 及以下）需加 -webkit-transform 前缀

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

不要用 vertical-align: middle 直接居中块级元素

vertical-align 仅对行内元素（span、img）、表格单元格（td）或 display: table-cell 元素生效。直接给 div 设 vertical-align: middle 完全无效——这是初学者最常踩的坑。

立即学习“前端免费学习笔记（深入）”；

• 若坚持用表格语义，可将父容器设为 display: table，子元素设为 display: table-cell，再配 vertical-align: middle
• 但该方案语义混乱、调试困难，且在响应式中易出错，不推荐新项目使用
• 检查失效时，先用浏览器开发者工具确认元素实际 display 类型和是否处于行内上下文

真正难的不是选哪种方法，而是判断容器高度是否可控、子元素是否需要保持文档流位置、以及是否要兼容老旧环境。多数情况下，flex 是第一选择；只有在必须支持 IE9 或嵌入式 WebKit（如某些机顶盒）时，才退回 absolute + transform 组合。