CSS实现垂直居中的几种方法

下面简单的总结下，单行文本和多行文本在不同场景下的垂直居中方法。

CSS：

.single{
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid lightblue;
}
.single-heig{
height: 40px;
line-height: 40px;
border: 1px solid lightgray;
}
.double{
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid lightcoral;
}
.double-heig{
height: 40px;
border: 1px solid lightseagreen;
}

html：

<!--  单行文本垂直居中  -->
<p class="single">我是单行文本，不设置高度，设置相同的padding-top和padding-bottom</p>
<p class="single-heig">我是高度固定的单行文本，设置行高，IE7不兼容</p>
<!--  多行文本垂直居中  -->
<p class="double">我是多行文本，不设置高度，设置相同的padding-top和padding-bottom。</br>今天是周四可以看不良人和镇魂街了，吼吼！</p>
<p class="double-heig">我是高度固定的多行文本，我是高度固定的多行文本,我是高度固定的多行文本,我是高度固定的多行文本,我是高度固定的多行文本。</p>

此外还可以使用定位来实现垂直居中，单行、多行文本都可以。前提是已知元素的宽度和高度，此处假设都为100px。

设置  width: 100px;  height: 100px;  position:absolute;  top:50%;  left:50%;  margin-top: -50px;  margin-left:-50px;。

中心思想为相对定位，距离顶部和左边分别为50%，设置margin-top和margin-left的值分别为宽度和高度的一半负值。