我在實現(xiàn)水平垂直居中的方式有這樣一個過程：
1浮定、學(xué)習(xí)前端之初哑舒，認(rèn)識了margin:auto,它可以完美實現(xiàn)block元素的水平居中砰奕，但是也有一個疑問脯丝，為什么只是能實現(xiàn)水平居中但是不能實現(xiàn)垂直居中呢吮螺？（下文說明原因）
2饶囚、既然margin:auto實現(xiàn)不了水平垂直居中，那么想要實現(xiàn)該怎么辦呢鸠补？
.container{
width:1000px;
height: 500px;
}
.item{
width:200px;
height:200px;
position: absolute;
left:50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
這段代碼是我最早接觸到的能夠?qū)崿F(xiàn)水平垂直居中的方式萝风，但是用了一段時間之后我發(fā)現(xiàn)如果居中元素的寬高未知的時候這種方式就不管用了。于是我又尋求新的方式紫岩。
3规惰、發(fā)現(xiàn)了transform方式：
.container{
width:1000px;
height: 500px;
}
.item{
width:200px;
height:200px;
background:red;
position: absolute;
left:50%;
top: 50%;
transform:translate(-50%, -50%);
}
遺憾的是我當(dāng)時還在開發(fā)著需要兼容IE8的產(chǎn)品，所以不得不放棄了這種方式泉蝌，繼續(xù)尋求歇万。
4、于是勋陪，我發(fā)現(xiàn)了完美的方法
.container{
width:1000px;
height: 500px;
}
.item{
width:200px;
height:200px;
background:red;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
沒錯贪磺，你又看到了margin:auto;我在一開始說到的只能實現(xiàn)水平居中不能實現(xiàn)垂直居中的margin:auto;在上邊這段又出現(xiàn)了，而且完美實現(xiàn)了垂直居中诅愚『看代碼你會發(fā)現(xiàn)多了絕對定位，并且將絕對定位上下左右偏移都設(shè)為0，這樣margin:auto也會在垂直方向生效刹前，為什么呢泳赋？
我來試著解釋一下：
首先，我們知道div這類流體元素的寬度是填滿父級元素的喇喉，也就是說相對父級來計算寬度祖今，而居中也是相對父級元素計算的，margin:auto可以完美平分水平方向的剩余空間拣技。但是div的高度卻與父級元素?zé)o關(guān)衅鹿，它是靠子元素的高度撐起來的，所以沒有所謂的剩余空間过咬。那么大渤，接下來的絕對定位又干了什么呢？我們知道絕對定位可以相對它設(shè)置過定位的父元素來定位掸绞，但是它具有“包裹性”泵三，也就是寬高都被子元素的內(nèi)容撐開，這時衔掸，通過設(shè)置 left/right/top/bottom為0烫幕，可以取消這種“包裹性”，使元素的寬高受控于父級元素敞映。這就符合margin:auto的使用條件较曼，從而實現(xiàn)水平垂直居中。
5振愿、flex方式
最后我們不得不說一下flex方式的水平垂直居中捷犹，簡潔而容易理解：
.container{
width:1000px;
height: 500px;
display:flex;
justify-content: center;
align-items: center;
}
.item{
width:200px;
height:200px;
background:red;
}
至此，我所知道的水平垂直居中方式都已包含在上冕末，日常應(yīng)用也足夠萍歉。
參考：
https://segmentfault.com/q/1010000000689833
https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
