前端垂直居中的几种简单实现

本文简单介绍几种垂直居中的方式：

一、`line-height`

此方法常用于文字的垂直居中。

原理：这是因为在浏览器中，会给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。当调整行高 line-height 时，中间的文本高度是不变的，上下间距会平分剩余的高度空间，自然也就能使得文本居中了。

line-height 也可用于元素的居中，但是只对inline-block的元素生效，并且需要配合 vertical-align 使用。

在父元素下只有一个元素，并且父元素设置了高度，那么只需要使用相对定位即可。

💡 注意：该必须条件为该父元素下只有一个子元素。

不知道自己高度和父元素高度时，可以使用绝对定位实现。

当一个父元素没有明确限制高度，而只是靠着内部元素的高度撑起来其高度时，我们又要在该父元素中设置一个居中的框框就可以采取这种方式：

使用 fixed 定位也可实现垂直居中，具体如下：

flex 是一种布局方式，具体可参考 Flex布局教程。

此方法是借用表格布局的方式实现居中。