css 實作垂直居中的 N 種場景及 N 種方法

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

後來仔細回憶了一下，其實CSS實作豎直居中是有幾種不同的應用場景的，需要分别使用不同的解決方法。這也是為啥每次都覺得，诶上次那個解決方法好像不行呢？（原來并不是我智商的問題）好了廢話不多說，記錄下遇到的不同場景及解決方法，希望能對自己或者别人有所幫助。

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

可以借助 padding, line-height, vertical-align 等屬性。有如下兩種具體情景：

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

這種情況，通過給元素上下添加相同大小的 padding 值即可實作豎直居中。

1 2 3

< div class = "container" > < p >單行文本豎直居中，添加相同的 padding-top & padding-bottom 值</ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

body { margin : ; } .container { background-color : #fe435e ; padding : 10px ; } p { margin : ; color : #fff ; padding-top : 100px ; padding-bottom : 100px ; }

如果就不想使用 padding 不友善使用 padding 時，可以通過給元素設定 line-height，使其等于父容器的高度，進而實作豎直居中。注意，此時記得要考慮父容器的 padding 和 border 帶來的高度變化。

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

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

1 2 3 4 5 6

< div class = "container" > < p > 多行文本豎直居中，給元素上下添加相同的 padding 值。< br /> 這隻是另外一段無關緊要的，用來測試的廢話。 </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

body { margin : ; } .container { background-color : #fe435e ; padding-left : 10px ; padding-right : 10px ; } p { width : 160px ; margin : auto ; color : #fff ; line-height : 1.5 ; padding-top : 40px ; padding-bottom : 40px ; }

另外一種方法，是借助 table 的屬性：将父容器設定成 table，需要豎直居中的元素設定為 table-cell，然後就可以使用 vertical-align 屬性來居中了。

1 2 3 4 5

< div class = "container" > < p > 多行文本豎直居中，将父容器設定為 table，需要豎直居中的元素設定為 table-cell， 然後使用 vertical-align 屬性。 </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

body { margin : ; } .container { background-color : #fe435e ; padding-left : 20px ; padding-right : 20px ; height : 400px ; display : table; } p { width : 160px ; margin : auto ; color : #fff ; line-height : 1.5 ; display : table-cell ; vertical-align : middle ; }

塊級元素豎直居中

通常借助 絕對定位 和 translate 等手段，在已知或者未知塊級元素高度時，分别使用不同的方法。

1. 塊級元素高度已知

此時可以使用絕對定位的方法，并借助 margin 可以為負值的特性，實作絕對定位居中：

/* 已知元素高度為 100px (也可以是百分比，如 80%)*/
height: 100px;
/* 先使用絕對定位，将元素的上邊界置于豎直的中間*/
position: absolute;  
top: 50%;
/* 再使用margin-top，将元素向上移動自身高度的一半*/
margin-top: -50px;      

1 2 3 4 5 6

< div class = "container" > < div class = "v-c" > < p >使用絕對定位使元素豎直居中。</ p > </ div > </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

body { margin : ; } .container { background-color : #fe435e ; padding : 0px 20px ;; height : 400px ; position : relative ; } .v-c { width : 400px ; padding : 20px ; padding-right : 20px ; background-color : #ade4eb ; height : 200px ; position : absolute ; top : 50% ; margin-top : -100px ; } p { margin : auto ; color : #fff ; line-height : 200px ; }

筆者表示類似這段代碼的使用頻率簡直不要太高~ 于是在使用 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 使元素向上移動自身高度的一半，進而實作豎直居中。更多精彩内容關注微信公衆号：全棧開發者中心（admin10000_com）

/* 先将元素的上邊界置于豎直的中間*/
position: relative;  
top: 50%;
/* 再使用 translateY，将元素向上移動自身高度的一半*/
transform: translateY(-50%);      

1 2 3 4 5 6

< div class = "container" > < div class = "v-c" > < p >使用 translateY 使元素豎直居中。</ p > </ div > </ p > </ div >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

body { margin : ; } .container { background-color : #fe435e ; padding : 0px 20px ;; height : 400px ; } .v-c { width : 400px ; padding : 20px ; padding-right : 20px ; background-color : #ade4eb ; position : relative ; top : 50% ; transform: translateY( -50% ); } p { margin : auto ; color : #fff ; line-height : 200px ; }

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