BFE.devAI解答 - 前端面试问题
121. 如何实现垂直居中？

使用 position 实现垂直居中适合需要固定高度的元素，并已知其高度的情况下，可以使用 top 和 bottom 属性来实现垂直居中，或者使用 translateY 和负的元素高度的一半来实现垂直居中。

使用 flex-box 实现垂直居中适合需要自适应高度的元素，并且该元素为 flex container 的子元素，可以使用 align-items 属性设置为 center 来实现垂直居中。

使用 line-height 实现垂直居中适合单行文本的元素垂直居中，可以把 line-height 设置为实际高度相同的值，使得元素的文本在垂直方向上居中。

使用 transform 实现垂直居中适合元素需要居中且高度未知的情况，可以使用 transform 属性的 translateY 和负的元素高度的一半来实现垂直居中。

使用负 margin 实现垂直居中适合元素高度已知中嵌套的元素实现垂直居中，可以使该元素的 margin-top 和 margin-bottom 都为负的元素高度的一半实现垂直居中。