1、通過verticle-align:middle實現CSS垂直居中。
通過vertical-align:middle實現CSS垂直居中是最常使用的方法，但是有一點需要格外注意，vertical生效的前提是元素的display：inline-block。
在使用vertical-align：middle的時候需要一個兄弟元素做參照物，讓它垂直於兄弟元素的中心點。vertical-align對齊的方法是尋找兄弟元素中最高的元素作為參考。
<html> <head> <title>demo</title> <style type="text/css" media="screen"> .parentBox{ background-color: pink; width: 500px; height: 200px; text-align: center; } .parentBox .childBox{ background-color: deepskyblue; display: inline-block; color: #ffffff; width: 100px; height: 100px; line-height: 100px; vertical-align: middle; } .parentBox .brotherBox{ height: 100%; width: 2px; background: red; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="parentBox"> <div class="childBox"> 子元素 </div><!-- / --> <div class="brotherBox"> </div><!-- / --> </div><!-- / --> </body> </html>
2、通過display:flex實現CSS垂直居中。
隨着越來越多瀏覽器兼容CSS中的flexbox特性，所以現在通過“display:flex”實現CSS水平居中的方案也越來越受青睞。
通過display:flex實現CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個是row(默認值)，另外一個是column。
3、通過偽元素:before實現CSS垂直居中。
具體方式是為父元素添加偽元素:before，使得子元素實現垂直居中。
4、通過display:table-cell實現CSS垂直居中。
給父元素display:table，子元素display：table-cell的方式實現CSS垂直居中。
5、通過隱藏節點實現CSS垂直居中。
創建一個隱藏節點#hide，使得隱藏節點的height值為剩余高度的一半即可。
這種方法也適用於CSS水平居中，原理一樣。
6、已知父元素高度通過transform實現CSS垂直居中。
給子元素的position:relative，再通過translateY即可定位到垂直居中的位置。
7、到垂直居中的位置。
8、通過line-height實現CSS垂直居中。
設置子元素的line-height值等於父元素的height，這種方法適用於子元素為單行文本的情況。
