讓文字垂直居中的幾種方法

一、使用Flexbox布局

Flexbox布局是一種全新的布局模式，可以通過屬性控制子元素的排列和尺寸。利用Flexbox的align-items屬性可以讓元素垂直居中。

.container {
   display: flex;
   align-items: center;
}

這裡的.container是父元素的樣式，display:flex表示這是一個Flexbox容器，align-items:center表示讓子元素垂直居中。

二、使用table-cell和vertical-align屬性

如果在父元素設定display: table，子元素設定display: table-cell，還可以使用vertical-align: middle屬性讓子元素垂直居中。

.container {
   display: table;
   height: 200px;
}
.center {
   display: table-cell;
   vertical-align: middle;
}

這裡的.container是父元素的樣式，display:table使父元素變成一個表格，height:200px樣式設定容器高度。center是子元素的樣式，display:table-cell表示子元素是一個表格單元，vertical-align:middle表示垂直居中。

三、使用position:absolute和transform屬性

如果父元素設定position:relative，子元素設定position:absolute和transform屬性，就可以使用translateY（父元素高度-子元素高度）/2的值讓子元素垂直居中。

.container {
   position: relative;
   height: 200px;
}
.center {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

這裡的.container是父元素的樣式，position:relative表示父元素定位方式為相對定位，height:200px表示父元素高度。center是子元素的樣式，position:absolute表示子元素定位方式為絕對定位，top:50%表示定位到父元素頂部50%的位置，transform:translateY(-50%)表示向上平移自身高度的50%。

四、使用line-height屬性

除了以上三種方法，還可以通過設置行高（line-height）等於容器高度（height）來讓子元素垂直居中。

.container {
   height: 200px;
   line-height: 200px;
}

這裡的.container是父元素的樣式，height:200px和line-height:200px表示父元素和子元素的高度都為200px。

五、使用偽元素實現

最後一種方法是使用偽元素:before實現垂直居中。

.container:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
.center {
   display: inline-block;
   vertical-align: middle;
}

這裡的.container是父元素的樣式，:before是偽元素選擇器，content:”表示向:before選擇器中插入內容，display:inline-block表示偽元素是一個內聯塊元素，height:100%表示偽元素的高度與父元素一樣高，vertical-align:middle表示垂直居中。center是子元素的樣式，display:inline-block表示子元素是一個內聯塊元素，vertical-align:middle表示垂直居中。