讓乙個塊級元素垂直居中的八種方法

最後

效果圖：

設定父元素相對定位，子元素position: absolute;top: 50%;同時margin-top值為-(子元素高度的一半)，因為設定top值時是相對於盒子頂部，所以想要居中還要往上移動半個盒子的高度才能實現。ie版本都可以相容，**如下：

效果圖：

和上一種方法原理差不多，都是利用相對定位和絕對定位，有點不同是子元素內加上了transform: translatey(-50%);和margin-top: -50px;作用差不多，話不多說，上**：

上圖：

這種方法和上一種相似，這是利用相對定位，在子元素中設定position: relative;top: 50%;transform: translatey(-50%);先相對自身向下平移父元素的50%，再。。。你們懂的。

**：

圖：（雖然這些圖都是一毛一樣。。。）

還是看圖吧：

設定父元素為相對定位，子元素為絕對定位，同時設定子元素的top,bottom,left,right值為0，最後設定margin:auto;這能實現塊元素的垂直+水平居中，看**：

看圖：

如果只實現垂直居中，則只設定top,bottom值為0，看**：

.in

如果要實現水平居中當然是只設定right,left為0就好啦。

設定父容器為display: table-cell;vertical-align: middle;注意：不能將display:inline-block;替代display:table-cell;具體**如下：

差不多就是這些，參考的網上的一些部落格，取捨了一些，自己動手試了一下，有些實現不了，就沒有整理出來，如果以後還發現新的方法再整理出來。發現乙個問題就是很多東西學過，也知道，但真正叫你描述出來或者問你的時候，真的就懵了，所以解決方法還是多練習吧，希望每天都有進步。

最後整理不易，期待親們的贊。