CSS頂部居中是Web開發中經常用到的一種布局方式，可以讓頁面中的內容在垂直方向上居中顯示。本文將介紹幾種實現頂部居中的方法。

.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這是一種比較常見的方法，需要將父元素設置為相對定位，然后通過top屬性將其移動到頁面的中間位置。接著使用transform屬性，將元素往上移動自身高度的一半，以達到垂直居中的效果。

.container {
display: flex;
align-items: center;
}

這是使用Flexbox布局的一種方法，通過將父元素的display屬性設置為flex，并使用align-items屬性將子元素對齊到垂直中心。

.container {
display: grid;
place-items: center;
}

使用CSS Grid布局也是一種可以實現頂部居中的方法，通過將父元素的display屬性設置為grid，然后使用place-items屬性將元素對齊到垂直和水平中心。

以上三種方法都可以實現頂部居中的效果，開發者在實際應用中可以根據具體情況選擇適合自己的布局方式。