其實CSS實現竪直居中是有幾種不同的應用場景的，需要分別使用不同的解決方法。這也是爲啥每次都覺得，誒上次那個解決方法好像不行呢？（原來並不是我智商的問題）好了廢話不多說，記錄下遇到的不同場景及解決方法，希望能對自己或者別人有所幫助。
inline 或者 inline-* 的元素竪直居中
可以借助 padding, line-height, vertical-align 等屬性。有如下兩種具體情景：
1. 單行竪直居中，如單行文本或者鏈接
這種情況，通過給元素上下添加相同大小的 padding 值即可實現竪直居中。
單行文本竪直居中，添加相同的 padding-top & padding-bottom 值。
body {
margin: 0;
}
.container {
background-color: #fe435e;
padding: 10px;
}
p {
margin: 0;
color: #fff;
/* 相同的上下 padding 值使單行文字居中 */
padding-top: 100px;
padding-bottom: 100px;
}如果老娘就不想使用 padding 不方便使用 padding 時，可以通過給元素設置 line-height，使其等於父容器的高度，從而實現竪直居中。注意，此時記得要考慮父容器的 padding 和 border 帶來的高度變化。
2. 多行竪直居中，如多行文本
和單行文本一樣，給元素上下添加相同大小的 padding 值，還是好用滴~
多行文本竪直居中，給元素上下添加相同的 padding 值。
body {
margin: 0;
}
.container {
background-color: #fe435e;
padding-left: 10px;
padding-right: 10px;
}
p {
width: 160px;
margin: 0 auto;
color: #fff;
line-height: 1.5;
/* 給元素上下添加相同大小的padding值 */
padding-top: 40px;
padding-bottom: 40px;
}另外一種方法，是借助 table 的屬性：將父容器設置成 table，需要竪直居中的元素設置爲 table-cell，然後就可以使用 vertical-align 屬性來居中了。
多行文本竪直居中，將父容器設置爲 table，需要竪直居中的元素設置爲 table-cell， 然後使用 vertical-align 屬性。
body {
margin: 0;
}
.container {
background-color: #fe435e;
padding-left: 20px;
padding-right: 20px;
height: 400px;
/* 父容器設置成 table*/
display: table;
}
p {
width: 160px;
margin: 0 auto;
color: #fff;
line-height: 1.5;
/* 需要竪直居中的元素設置爲 table-cell*/
display: table-cell;
vertical-align: middle;
}塊級元素竪直居中
通常借助 絕對定位 和 translate 等手段，在已知或者未知塊級元素高度時，分別使用不同的方法。
1. 塊級元素高度已知
此時可以使用絕對定位的方法，並借助 margin 可以爲負值的特性，實現絕對定位居中：
/* 已知元素高度爲 100px (也可以是百分比，如 80%)*/ height: 100px; /* 先使用絕對定位，將元素的上邊界置於竪直的中間*/ position: absolute; top: 50%; /* 再使用margin-top，將元素向上移動自身高度的一半*/ margin-top: -50px;
使用絕對定位使元素竪直居中。
body {
margin: 0;
}
.container {
background-color: #fe435e;
padding: 0px 20px;;
height: 400px;
/* 父容器需要設置position, 使需要竪直居中的元素相對父容器進行絕對定位*/
position: relative;
}
.v-c {
width: 400px;
padding: 0 20px;
padding-right: 20px;
background-color: #ade4eb;
height: 200px;
/* 使用絕對定位使元素竪直居中*/
position: absolute;
top: 50%;
margin-top: -100px;
/* 需要考慮 padding 和 border, 如果沒有設置 box-sizing: border-box; 的話*/
}
p {
margin: 0 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 使元素向上移動自身高度的一半，進而實現竪直居中。
/* 先將元素的上邊界置於竪直的中間*/ position: relative; top: 50%; /* 再使用 translateY，將元素向上移動自身高度的一半*/ transform: translateY(-50%);
使用 translateY 使元素竪直居中。
body {
margin: 0;
}
.container {
background-color: #fe435e;
padding: 0px 20px;;
height: 400px;
}
.v-c {
width: 400px;
padding: 0 20px;
padding-right: 20px;
background-color: #ade4eb;
/* 使用 translateY，使元素竪直居中*/
position: relative;
top: 50%;
transform: translateY(-50%);
}
p {
margin: 0 auto;
color: #fff;
line-height: 200px;
}
