CSS是前端開發中必不可少的一部分，其中涉及到的內容垂直居中是一個經常遇到的問題。接下來，我們將討論如何在CSS中實現內容垂直居中顯示。

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

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

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

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

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