如何讓文本在CSS中垂直居中？

一、使用display:flex

要讓文本在CSS中垂直居中，最常見的方法是使用display:flex。這個方法可以讓元素以彈性布局的方式顯示內容，從而實現垂直居中。

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

上面的代碼中，.container就是我們要垂直居中的元素的父級元素。align-items屬性可以控制其子元素在縱向上的對齊方式，通過設置為center，就可以讓其垂直居中。

需要注意的是，display:flex並不是所有瀏覽器都支持，可以在樣式中加入-webkit-box等屬性以增加兼容性。

二、使用vertical-align

在CSS中，vertical-align屬性可以控制元素在縱向上的對齊方式。但是有時候為了讓它起作用，需要將其作用的元素的display屬性設置為table-cell。

.container{
   display: table-cell;
   vertical-align: middle;
}

這樣，元素就會在縱向上垂直居中。需要注意的是，這個方法只適用於元素的高度已知的情況。

三、使用line-height

在CSS中，line-height屬性可以控制文本的行高，從而使其在縱向上垂直居中。這個方法適用於單行文本和行高已知的情況。

.container{
   line-height: 50px;
}

上面的代碼中，50px就是文本的行高。通過將行高設置為和元素的高度相等，就可以使得文本在縱向上垂直居中。

四、使用translate

另一種垂直居中的方法是使用CSS3的translate屬性。

.container{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

上面的代碼中，position: absolute可以使得元素定位，top: 50%可以將其向上移動50%，而transform: translateY(-50%)則可以將其上移動自身高度的一半，從而達到垂直居中的效果。

五、使用flexbox對齊技巧

除了使用display:flex，我們還可以用flexbox的對齊技巧來實現垂直居中。

.container{
   display: flex;
}
.text{
   margin: auto 0;
}

上面的代碼中，我們可以將margin設置成auto 0，這樣就可以在子元素中將其與父級元素的空間平均分配，從而實現垂直居中的效果。