水平垂直居中

讓塊級元素居中的方法就是設定 margin-left 和 margin-right 為 auto（前提是已經為元素設定了適當的 width 寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）。常見用法如下所示：

.center-me

請注意，float 屬性是不能實現元素居中的。

設定子元素的高度以及padding-top 和 padding-bottom

div

div img

法一：仍然使用padding-top 和 padding-bottom （父元素要有確定的高度）

法二: 使用給父元素設定display:table-cell;和vertical-align: middle;屬即可；

#father

你還可以使用 flexbox 實現垂直居中，對於父級容器為 display: flex 的元素來說，它的每乙個子元素都是垂直居中的：（父元素要有確定的高度）

.flex-center-vertically

.parent

.child

使用定位

.parent

.child

.parent

設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%，最後使用負向 margin 實現水平和垂直居中，margin 的值為寬高（具體的寬高需要根據實際情況計算 padding）的一半。

.parent

.child

如果無法獲取確定的寬高，同樣需要設定父級容器為相對定位的容器，設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%。不同的是，接下來需要使用 transform: translate(-50%, -50%); 實現垂直居中

.parent

.child

.parent

.child

使用 flexbox 實現水平和垂直居中，只需使用兩條居中屬性即可：

.parent

水平 垂直居中