方式一：單行文本垂直居中
其實單行文本垂直居中是垂直居中中最為簡單的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height設定為同樣的數值。
當然也有道友說其實這個地方設定height值其實完全沒有必要，容器會根據line-height自動撐開。這個理論實際上是正确的，他的正确的前提在于該元素内隻有文本節點。
但是如果父級元素不設定高度，子元素設定了高度，這個時候就不能垂直居中了，因為父級元素的高度和子元素的高度+margin值 一樣了。是以為了保險建議還是設定height和line-height相同，來實作單行文本的居中。
<span style="font-size:14px;"><div style="height:200px;line-height:200px;">
我是垂直居中的
</div></span>
方式二：利用vertical-align垂直居中
很多人說vertical-align不好用，使用了這個樣式，達不到居中的效果。其實寫這個文章之前我也是這麼認為的，但是看了vertical-align的說明後，才發現是自己用錯了。在w3c上面，vertical-align是這樣解釋的：
“該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格内容的對齊方式。”
根據這個話，做垂直居中其實可以這樣玩：
（1）、設定父級元素為table-cell
通過設定父級元素為display:table-cell以及vertical-align:middle，這樣就可以使子元素垂直居中了。這裡呢和table裡面的垂直居中類似。
注意：設定為display:table-cell的元素，千萬不能使用浮動或者定位，否則會喪失table-cell元素的垂直居中的功能。因為浮動和定位是塊級元素專有的。如果實在要使用浮動或者定位，可以再外面套一層div，在這個div上面使用浮動或者定位。
<div style="height:200px;display:table-cell;vertical-align:middle;">
<div>我是垂直居中的,多點字可以變成多行文本我是垂直居中的,多點字可以變成多行文本我是垂直居中的,多點字可以變成多行文本我是垂直居中的,多點字可以變成多行文本</div>
</div>
（2）、如果子元素是圖檔
vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2父元素中字母X的高度對齊。由于字元X在em框中并不是垂直居中的，且各個字型的字元X的高低位置不一緻。是以，當字型大小較大時，這種差異就更明顯。當font-size為0時，相當于把字元X的字型大小設定為0，于是可以實作完全的垂直居中。
<div style="height:200px;font-size:0px;line-height:200px;">
<img style="vertical-middle:middle;" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>
(3)、通過新增元素來實作垂直居中
可以将新增的元素高度設定的和父級元素一樣高，寬度為0，并且同樣設定vertical-middle:middle以及display:inline-block;
由于兩個元素之間的空白會被解析，是以需要在父級設定font-size:0px;在子級又将font-size設定回來。
<style>
.parent{
height:300px;
font-size:0px;
}
.child{
font-size:14px;
display:inline-block;
vertical-align:middle;
}
.childAdd{
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
}
</style>
<div class="parent">
<div class="child">
我是垂直居中的,多點字可以變成多行文本我是垂直居中的
</div>
<lable class="childAdd"></label>
</div>
如果對文檔結構要求比較嚴格，其實我們也可以利用:after來實作。
<style>
#parent3{
background: red;
height:300px;
font-size:0px;
}
#parent3:after{
content:"";
display:inline-block;
height:100%;
vertical-align: middle;
}
#parent3>div{
font-size:1rem;
vertical-align:middle;
display: inline-block;
}
</style>
<div id="parent3">
<div>我就是想垂直居中而已我就是想垂直居中而已我就</div>
</div>
方式三：通過絕對定位來實作垂直居中
配合translate()位移函數。translate樣式的百分比是相對于自身高度的。而top的百分比是相對于父級元素的高度的。是以可以利用這個特性來實作垂直居中。
<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="parent" style="height:100px;">
<div class="child">測試文字</div>
</div>
那麼同樣的道理，如果要求body的子元素垂直居中，也可以使用margin來實作。
<style>
.child{
margin-top:50vh;
transform:translateY(-50%);
}
</style>
<body>
<div class="child">測試文字</div>
</body>
方式四：使用彈性盒模型flex實作垂直居中
（1）、在伸縮容器上設定側軸對齊方式align-items: center
<style>
.parent{
display: flex;
align-items: center;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
（2）、在伸縮項目上設定margin: auto 0
<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
以上則是垂直居中的幾種實作方式。有一些是利用了css3的樣式屬性，使用的時候一定要注意。
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)