本文轉載自 https://www.cnblogs.com/jiekk/p/5802147.html，個人參考着實作了效果并總結如下，如果喜歡請給原作者評論分享~
1.引言
div的垂直水準居中應該是很常見的問題了，網上的方法也很多~總之就是要實作下圖這個效果：
我們慢慢來，先看看實作這個效果真正的難點（坑）在哪裡~先不說具體的實作，很多人應該都熟悉margin：0 auto這個“标配”吧？這是讓div的上下margin變成0，左右margin自動計算，加上這一句很容易就能實作div的水準居中~不過為什麼不把上下左右的margin全部設定成auto呢？這樣不就上下左右都居中了？
那麼我來解釋一下：
首先，div是一個塊級元素，寬度預設都是相對于父元素的100%，即：一個塊元素，如果我們不人為的去設定它的寬度，他就單獨占一行！換句話說，這一行就隻有他一個元素！想讓他水準居中，左右margin設定成auto後底層很容易就可以計算出margin具體的數值應該是多少，進而達成左右居中。說到這裡，我們再去考慮垂直居中：頁面在垂直方向上塊級元素不一定隻有一個，即塊級元素沒有“預設占一列”這樣的規定，是以即使把margin設定成auto，也不能自動計算出margin到底該是多少......
了解了以上問題，我們便可以把中心轉移到垂直居中上面了~
2.實作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div居中</title>
<link rel="stylesheet" type="text/css" href="test.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="outerDiv" style="width:250px;height:350px;border: 2px solid red;">
<div class="innerDiv" style="width: 150px;height: 150px;background-color: green;">
</div>
</div>
</body>
</html>
這是基本的布局（還沒有實作居中），為了直覺，我把居中相關的樣式 作為外聯樣式，其他的直接直接作為内聯樣式。
法1：利用display：table-cell（相容IE8+）
.outerDiv{
display: table-cell;
vertical-align: middle;
}
.innerDiv{
margin: 0 auto;
}
原理：改變父元素基線的位置，而子元素基線都是自動與父元素基線在一行的。子div再加上margin：0 auto保證自己水準居中即可
缺點：對父元素的限制（無法設定margin等），相容IE8及以上（因為IE8以前的display不支援table-cell）
優點：同時有多個子元素也可以居中
思考 1：隻寫vertical-align：middle可以完成子元素垂直居中嗎？
Answer：No！為什麼？因為：
vertical-align是用來定義行内元素（inline）的基線相對于該元素所在行的基線的垂直對齊，也就是說，vertical-align的作用是調整目前元素（前提他是行内元素，或者有行内元素的特性）基線的位置，而這個元素的子元素預設都是跟基線對齊的。vertical-align是行内元素的一個屬性（但是div是塊級元素！）。
是以，我們要想辦法讓父元素有inline的屬性，也就是讓他變成table-cell！
思考 1.1：如果不是table-cell，還有什麼方法讓父元素具有行内元素特性？
Answer：當然可以直接把父元素設定成display：inline，但是他也就完完全全是一個行内元素了，無法設定高度，寬度，margin這些......還有一點需要注意，設定成inline-block是不行的，div本身的内容還是塊級元素的特性。其他的方法我暫時沒有想到了......
法2：利用相對定位和絕對定位
第一種寫法：
.outerDiv{
position: relative;
}
.innerDiv{
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
第二種寫法：
.outerDiv{
position: relative;
}
.innerDiv{
position: absolute;
left: 50%;
top:50%;
margin-left: -75px;/*子div寬度的一半*/
margin-top: -75px; /*子div高度的一半*/
}
原理：把父元素設定成非靜态元素，讓子元素可以相對它來進行絕對定位完成居中
優點：相容性好
缺點：子元素隻能有一個
3.小結
關于這幾種方法，法1是原理比較難了解的，法2是比較常見的，當然具體選用哪種方法看各自的需要，需要多個子div居中選法1，一個選法2，個人認為法1的相容性不是很突出的缺點~
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)