CSS是前端開發(fā)中必不可少的一部分，其中涉及到的內(nèi)容垂直居中是一個(gè)經(jīng)常遇到的問題。接下來，我們將討論如何在CSS中實(shí)現(xiàn)內(nèi)容垂直居中顯示。

這是一段需要垂直居中的文本
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.content {
text-align: center;
}

第一種方法是使用 flex 布局，將外層容器設(shè)置為 flex，并設(shè)置 justify-content 和 align-items 為 center，這樣子元素就可以在垂直和水平方向上均居中。上述pre標(biāo)簽中就是使用這種方法實(shí)現(xiàn)。

這是一段需要垂直居中的文本
.container {
display: table;
width: 100%;
height: 100vh;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}

第二種方法是使用 table-cell 布局，將外層容器設(shè)置為 display: table，內(nèi)層容器設(shè)置為 display: table-cell 和 vertical-align: middle，使其在垂直方向上居中。需要注意的是，這種方法在一些具有 IE 8 等老式瀏覽器的環(huán)境中可能會出現(xiàn)問題。

綜上所述，如果我們想實(shí)現(xiàn)內(nèi)容垂直居中，我們可以使用 flex 布局或 table-cell 布局。具體選擇哪種方法取決于具體情況，如果考慮到兼容性問題，建議選擇 table-cell 布局。