在網頁設計中，垂直居中是一項常見的需求。特別是當我們需要在一個容器中放置文字、圖片或者其他元素時，如果沒有垂直居中的支持，就會顯得格外不美觀。這篇文章將介紹如何使用CSS來實現垂直居中顯示。

.container {
display: flex; /* 使用flexbox布局 */
align-items: center; /* 垂直居中 */
}

以上是一種最為簡單的方式，通過設置容器的display屬性為flex，再設置align-items屬性為center，就可以輕松地實現垂直居中顯示。
下面是另外一種比較常見的方式，通過設置容器和子元素的position和top屬性來達到目的：

.container {
position: relative;
}
.container img {
position: absolute; /* 改為絕對定位 */
top: 50%; /* 頂部距離為50% */
transform: translateY(-50%); /* 通過向上移動50%的高度來實現垂直居中 */
}

以上是設置子元素絕對定位的方式，同樣，也可以通過設置容器絕對定位，再讓子元素相對定位來實現垂直居中。

總的來說，以上兩種方法都很常見，視具體情況而定。值得一提的是，現在也有采用grid布局實現垂直居中的方式，但是相對較為復雜，這里就不做展開介紹。