垂直水平居中的幾種方法

.father .son

效果圖：

當元素絕對定位時，它會根據離他最近的乙個非static定位的父元素進行定位，這裡應該根據父元素定位。

.father .son

效果圖：

首先用top:50%;和left:50%;讓子元素的座標原點（左上角）移動到父元素的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣子元素的中心點就跟父元素的中心點對齊了。

這種情況只適用於子元素自身的寬高已知的情況，若寬高不確定，如子元素為文字，則寬高由內容確定，可以使用下面的方法：

.father .son

效果圖：

子元素設定相對于父元素進行絕對定位，首先將子元素左上角定位到父元素中心，即使用top:50%和left:50%定位到中心，然後使用translate()相對於自身的高寬的一半進行移動，即可把自己的中心移到父元素的中心。

這裡用到的原理是translate函式中的百分比是相對於元素自身的高寬來計算的。

方法一：

當父元素設定為display:flex後，子元素設定margin:auto就可以相對于父元素在垂直和水平方向進行居中。

.father .son

方法二：也可以直接給父元素設定容器屬性讓其內的專案居中：

.father