CSS 如何实现垂直居中？｜字节跳动前端面经解析

60 秒回答模板

我会先问清楚居中的对象和约束：父容器是否有固定高度，子元素高度是否已知，是单行文本还是块级内容，是否还要水平居中，是否需要兼容旧浏览器。现代项目中最常用的是 flex：父容器设置弹性布局，交叉轴用 align-items: center，主轴需要时用 justify-content: center；grid 也可以用 place-items: center。若父容器和子元素尺寸已知，可用绝对定位配合 top: 50% 和 margin 或 transform translateY(-50%)；未知高度更推荐 transform。单行文本可以让 line-height 等于容器高度。多行文本或内联内容可用 table-cell vertical-align: middle，但现在更多作为兼容方案。选择时还要考虑内容溢出、响应式尺寸、写作模式和可维护性。

考点 先问条件

难度 真实面经高频题

回答目标 讲清机制、边界和追问

深入解析

先判断布局约束

垂直居中不是背一个属性，而是根据约束选方案。父元素有没有高度，子元素高度是否固定，内容是否会换行，是否需要水平居中，是否有响应式和兼容要求，都会影响实现。面试回答先讲判断维度，会比直接报 flex 更完整。

flex 是现代首选

父容器使用 flex 后，align-items: center 可以让子项在交叉轴居中；若 flex-direction 默认为 row，这就是垂直方向居中。配合 justify-content: center 可同时实现水平居中。它适合一行或少量子项，也适合高度不固定的内容，语义清晰且维护成本低。

grid 适合二维居中

grid 的 place-items: center 可以同时控制水平和垂直居中，对单个子元素或二维布局都很直观。相比 flex，grid 更偏二维空间管理，适合容器内部只有一个主要内容块，或需要在网格单元内居中对齐的场景。

定位方案处理未知高度

absolute 定位配合 top: 50% 再用 transform: translateY(-50%)，可以在不知道子元素高度时把自身向上移动一半高度。若子元素高度已知，也可用负 margin。定位方案会脱离普通文档流，可能影响周围元素布局，所以更适合弹层、徽标、覆盖层等独立定位场景。

文本和兼容方案

单行文本可用 line-height 等于容器高度实现垂直居中，但多行内容会失效或行距异常。table-cell 搭配 vertical-align: middle 能处理一些旧式布局和多行内容，但会改变布局模型。实际项目中还要关注内容溢出、最小高度、动态字体和移动端安全区域。

易错点

不问场景，直接说 line-height，忽略多行内容和未知高度。
把 justify-content 和 align-items 的轴向含义说反。
滥用 absolute 定位，导致元素脱离文档流并覆盖其他内容。
只讲一种方法，不说明适用条件、兼容性和动态内容边界。

面试官追问

flex 垂直居中为什么用 align-items？

在默认 flex-direction: row 下，主轴是水平方向，交叉轴是垂直方向。align-items 控制交叉轴对齐，所以它负责垂直居中；justify-content 控制主轴，所以负责水平分布。

absolute + transform 有什么缺点？

元素脱离文档流，不再占据原位置，可能覆盖或影响其他内容；transform 还会创建新的渲染上下文，某些情况下影响定位、字体渲染或子元素 fixed 行为。普通布局优先考虑 flex 或 grid。

多行文本为什么不能简单用 line-height？

line-height 等于容器高度只适合单行文本。多行文本每一行都会使用这个行高，导致行距巨大、内容溢出或无法自然换行。多行内容应使用 flex、grid 或 table-cell 等容器对齐方式。

父容器没有固定高度怎么居中？

如果父容器高度由内容撑开，严格意义上的垂直居中没有稳定参考线。通常需要给容器定义 min-height、height、padding 或使用视口高度等约束，然后再用 flex、grid 或定位方案居中。