CSS 是一种重要的网页设计语言，它有着丰富的样式属性来控制网页中的元素。在网页设计中，有时需要将某个元素放在页面的顶部并居中显示，下面来介绍一下如何使用 CSS 实现这个效果。

/* 在 CSS 文件中添加以下代码 */
.top-center {
position: absolute;  /* 使用绝对定位来让元素脱离文档流 */
top: 0;  /* 相对于父元素顶部进行定位 */
left: 50%;  /* 相对于父元素左侧进行定位，将元素挪到页面中央 */
transform: translateX(-50%);  /* 使元素向左平移其宽度的一半 */
}

如上所示，我们先创建了一个名为 top-center 的 CSS 类，使用了 position 属性来脱离文档流，然后使用 top 属性将元素定位在页面的顶部，并使用 left 属性将其挪到页面中央。

接着使用 transform 属性和 translateX 函数来将元素向左平移其宽度的一半，达到水平居中的效果。

最后，我们只需要将需要居中的元素添加上 top-center 类即可。

Hello, World!

如上所示，我们在一个 div 元素中添加了一个 h1 元素，并为其添加了 top-center 类。这样，该元素就可以放置在页面顶部并且水平居中显示了。