總結一下各種居中（內聯元素、塊級元素、浮動元素、絕對定位元素）*（水平、垂直）
在平時寫網頁樣式的時候，元素居中應該是最常見不過的了，在這裏我們把常見居中的情況簡單總結一下。本文討論以下幾種情況：內聯元素、塊級元素、浮動元素、絕對定位元素。居中的情況分兩種情況：水平居中和垂直居中。剛接觸到居中，我想到的是兩個方向，一是使元素內部的所有元素相對於此元素居中，另一個是元素在其他元素中居中。以下的居中我們討論的都是元素在其他元素中居中。
（一）內聯元素
水平居中：只需在其父元素的樣式中加上text-align: center;即可。
垂直居中：
1. line-height
2. padding
3. line-height 和 padding結合
三種方法都是在父元素上添加
<div class="aha"> <span>從明天起</span> </div> <style>
.aha{
border: 1px solid red;
text-align: center;
line-height: 100px;
/* padding: 30px 0; */
}
</style>
效果圖：
（二）塊級元素
A. 水平居中：修改margin，分兩種情況討論，一種是寬度固定，一種是寬度不固定。
a）寬度固定時，margin-left: auto; margin-right: auto;
b）寬度不固定時，margin-left: 20px; margin-right: 20px;
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; } .child{ width: 100px; border: 1px solid green; margin-left: auto; margin-right: auto; } </style>
效果圖：
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; } .child{ border: 1px solid green; margin-left: 100px; margin-right: 100px; } </style>
效果圖：
B. 垂直居中：設置父元素的padding: 100px 0; 不管高度是否確定。
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; padding: 150px 0; } .child{ /* height: 100px; */ border: 1px solid green; } </style>
效果圖：
垂直居中也分兩種情況一是當父元素高度固定時，有兩種方法，第一種可以考慮position: absolute;缺點是子元素的寬高得固定，且父元素的高度不能自適應，具體代碼如下：
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; box-sizing: border-box; position: relative; height: 200px; // 如果設置全屏height: 100vh; } .child{ border: 1px solid green; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 100px; height:100px; } </style>
效果圖：
第二種是IE的話使用table標簽，或者給div添加table的相關屬性（具體方法見文末），Chrome和移動端可以使用flex布局。
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; display: flex; justify-content: center; align-items: center; height: 100px; } .child{ border: 1px solid green; } </style>
效果圖：
垂直居中還有一種情況是父元素高度不固定時，父元素用flex布局；
display: flex;
justify-content: center;
align-items: center;
（三）浮動元素，看到這個分類是不是想吐槽，沒錯，我也想，本來都讓人家靠左站或者靠右站了，還要讓它居中，真是閑的。
如果碰到這種情況我們可以試著把浮動元素包裹在其他類型的元素裏面，例如inline-block元素裏，再把這個inline-block元素居中。inline-block元素有一個坑，就是包起來之後下面會有一個縫隙，加上這樣一句話，vertical-align: top; 方方老師說別問他為什麽，那你也別問我為什麽，我也不知道。。。inline-block元素居中，在其父元素上添加text-align: center;
（四）絕對定位元素：分兩種情況，寬高固定和寬高不固定。
首先寬高固定：
<body> <div class="parent"> <div class="child">haha</div> </div> </body> <style> .parent{ border: 1px solid red; position: relative; height: 200px; } .child{ border: 1px solid green; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } </style>
效果圖：
寬高固定還有一種方法，參考上面的塊級元素垂直居中的父元素高度固定的第一種方法。
然後是寬高不固定，把上一種情況的margin-left和margin-top換成transform: translate(-50%, -50%)。
以上（三）、（四）種是脫離文檔流的情況，所有脫離文檔流的元素都變成了塊級元素。
table標簽是默認的絕對居中，IE也支持兼容性更好，上面提到的用div添加table的相關屬性模仿table標簽，class值為table的div設置屬性display: table; class值為tr的div設置屬性display: table-row; class值為td的div設置屬性display: table-cell; vertical-align: middle;
總結一下各種居中（內聯元素、塊級元素、浮動元素、絕對定位元素）*（水平、垂直）