css 實現豎直居中的 N 種場景及 N 種方法

剛開始工做的時候，css 裏的豎直居中一直是個老大難問題。每次用到的時候都去網上搜，搜，搜，半天才搜到合適的解決方法。而後下次遇到，呃，又忘了~

後來仔細回憶了一下，其實CSS實現豎直居中是有幾種不一樣的應用場景的，須要分別使用不一樣的解決方法。這也是爲啥每次都以爲，誒上次那個解決方法好像不行呢？（原來並非我智商的問題）好了廢話很少說，記錄下遇到的不一樣場景及解決方法，但願能對本身或者別人有所幫助。

inline 或者 inline-* 的元素豎直居中

能夠藉助 padding, line-height, vertical-align 等屬性。有以下兩種具體情景：

1. 單行豎直居中，如單行文本或者連接

這種狀況，經過給元素上下添加相同大小的 padding 值便可實現豎直居中。

RapmvY

若是本姑娘就不想使用 padding 不方便使用 padding 時，能夠經過給元素設置 line-height，使其等於父容器的高度，從而實現豎直居中。==注意，此時記得要考慮父容器的 padding 和 border 帶來的高度變化。==

bpqPwN

2. 多行豎直居中，如多行文本

和單行文本同樣，給元素上下添加相同大小的 padding 值，仍是好用滴~
ONpeEV

另一種方法，是藉助 table 的屬性：將父容器設置成 table，須要豎直居中的元素設置爲 table-cell，而後就可使用 vertical-align 屬性來居中了。

MypMBE

塊級元素豎直居中

一般藉助 絕對定位 和 translate 等手段，在已知或者未知塊級元素高度時，分別使用不一樣的方法。

1. 塊級元素高度已知

此時可使用絕對定位的方法，並藉助 margin 能夠爲負值的特性，實現絕對定位居中：

/* 已知元素高度爲 100px (也能夠是百分比，如 80%)*/
height: 100px;

/* 先使用絕對定位，將元素的上邊界置於豎直的中間*/
position: absolute;
top: 50%;

/* 再使用margin-top，將元素向上移動自身高度的一半*/
margin-top: -50px;

KzWjbq

筆者表示相似這段代碼的使用頻率簡直不要過高~ 因而在使用 scss 的前提下，本身封裝了一個 mixin，專門用來實現這種定位方式。

// 定義絕對定位實現水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 而後使用的時候直接引用就能夠了，這樣能夠避免在改動元素寬或高時，還須要同時去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

2. 塊級元素高度不固定

與上面提到的使用絕對定位居中的方法原理相似，只不過在元素高度不肯定的狀況下，藉助 translateY 使元素向上移動自身高度的一半，進而實現豎直居中。

/* 先將元素的上邊界置於豎直的中間*/
position: relative;
top: 50%;

/* 再使用 translateY，將元素向上移動自身高度的一半*/
transform: translateY(-50%);

bpqPyB

目前想到的就這些，應該足夠覆蓋大部分的使用狀況了~ 以上這些實現方法，固然也能夠是混合使用的，具體如何，就看應用場景啦。

另外，之後再遇到別的豎直居中的實現方法，也會更新到這裏。