CSS是網頁設計中常用的語言，它可以為網頁添加樣式和布局。本文將介紹如何在網頁中將圖片頂上并居中顯示。

/* CSS代碼 */
.container {
position: relative;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先需要一個容器，可以用一個帶有背景色或邊框的div元素作為容器。在容器中插入圖片元素。然后在CSS中將容器的position屬性設置為relative，將圖片的position屬性設置為absolute。

接著用top: 50%;和left: 50%;將圖片的位置移動到容器的中央。但是此時圖片的左上角處于容器中央而不是圖片中央，需要用transform: translate(-50%, -50%);將圖片的位置向左上方移動圖片自身寬度和高度的一半，從而將圖片居中。

<div class="container">
<img class="image" src="example.jpg">
</div>

在HTML中插入以上代碼，即可將圖片頂上并居中顯示。