CSS在窗口上下居中顯示是網頁制作中非常常見的一種樣式。下面我們來介紹一下如何實現這種效果。

.center {
position: absolute;   /* 絕對定位 */
top: 50%;             /* 距離頂部50% */
left: 0;              /* 距離左邊0 */
right: 0;             /* 距離右邊0 */
transform: translateY(-50%);  /* 將元素向上移動自身高度的一半 */
}

上面的代碼實際上是將需要居中的元素使用絕對定位，距離頂部50%，然后使用transform屬性將元素向上移動自身高度的一半，達到居中的效果。下面我們來解釋一下相關屬性的含義。

• position: absolute;

絕對定位，這種定位方式會將元素從文檔流中移出來，使得可以在任何位置進行定位，孤立于其他元素。

• top: 50%;

距離頂部50%，這是實現垂直居中的關鍵。

• left: 0;

距離左邊0，保證元素始終貼到左邊。

• right: 0;

距離右邊0，保證元素始終貼到右邊。

• transform: translateY(-50%);

將元素向上移動自身高度的一半，也就是將元素的中心點與屏幕中心對齊。

通過以上代碼，我們就可以很輕松地實現一個豎直居中的元素，并且在窗口大小發生變化時，元素也會保持居中的效果。