在前端開(kāi)發(fā)中，我們常常需要對(duì)文本或者圖片進(jìn)行上下居中的布局。今天，我們來(lái)探討一下CSS中文字的上下居中屬性。

text-align: center;
line-height: 100px;
height: 100px;

很多人會(huì)選擇使用line-height屬性進(jìn)行居中，但是這種方式只適用于單行文本。如果文本超過(guò)一行，那么就無(wú)法實(shí)現(xiàn)上下居中的效果了。

為了解決這個(gè)問(wèn)題，我們可以使用vertical-align屬性：

.vertical{
display: table-cell;
vertical-align: middle;
height: 100px;
}

這里我們使用了display: table-cell來(lái)使我們要垂直居中的元素表現(xiàn)出單元格的特征。然后，我們?cè)偈褂胿ertical-align: middle使文本在此單元格中垂直居中。

同時(shí)，我們也可以使用flex來(lái)實(shí)現(xiàn)這個(gè)效果：

.container{
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}

在.container容器中，我們使用display: flex來(lái)創(chuàng)建一個(gè)彈性布局。然后，我們使用align-items: center和justify-content: center來(lái)分別控制容器中的元素水平和垂直居中。

總之，使用vertical-align和flex來(lái)實(shí)現(xiàn)文字的上下居中效果非常方便和靈活。在今后的前端開(kāi)發(fā)中，我們可以靈活運(yùn)用這兩種方法，以實(shí)現(xiàn)各種復(fù)雜的布局效果。