CSS 是一種重要的網(wǎng)頁設(shè)計語言，它有著豐富的樣式屬性來控制網(wǎng)頁中的元素。在網(wǎng)頁設(shè)計中，有時需要將某個元素放在頁面的頂部并居中顯示，下面來介紹一下如何使用 CSS 實現(xiàn)這個效果。

/* 在 CSS 文件中添加以下代碼 */
.top-center {
position: absolute;  /* 使用絕對定位來讓元素脫離文檔流 */
top: 0;  /* 相對于父元素頂部進行定位 */
left: 50%;  /* 相對于父元素左側(cè)進行定位，將元素挪到頁面中央 */
transform: translateX(-50%);  /* 使元素向左平移其寬度的一半 */
}

如上所示，我們先創(chuàng)建了一個名為 top-center 的 CSS 類，使用了 position 屬性來脫離文檔流，然后使用 top 屬性將元素定位在頁面的頂部，并使用 left 屬性將其挪到頁面中央。

接著使用 transform 屬性和 translateX 函數(shù)來將元素向左平移其寬度的一半，達到水平居中的效果。

最后，我們只需要將需要居中的元素添加上 top-center 類即可。

Hello, World!

如上所示，我們在一個 div 元素中添加了一個 h1 元素，并為其添加了 top-center 類。這樣，該元素就可以放置在頁面頂部并且水平居中顯示了。