CSS顯示在屏幕中心通常是實現網頁設計中重要的一部分。在下面的例子中，我們將學習如何使用CSS來實現這種功能。我們將使用pre標簽顯示代碼，并使用p標簽以文本方式說明這個過程。

CSS樣式代碼：
.center {
position: absolute; /* 絕對定位 */
top: 50%; /* 距頂部50% */
left: 50%; /* 距左側50% */
transform: translate(-50%, -50%); /* 平移，使元素居中 */
}
HTML代碼：
<div class="center">
<p>Hello World!</p>
</div>

首先，我們使用CSS的position屬性將div標簽設置為絕對定位。接著，我們使用top和left屬性使該div標簽距離屏幕頂部和左側各50%。此時，該div標簽的左上角將位于屏幕正中心的點上。

然而，此時該div標簽的中心并不在屏幕的中心，我們需要用translate屬性來再向上和向左移動div標簽。translate的參數為負值，在水平和垂直方向上都分別設置為50%。這將使該div標簽重新定位，現在已經完全居中。

最后，我們在div標簽中添加我們想要居中顯示的內容。在上面的例子中，我們使用了p標簽包裹Hello World！這個簡單的例子展示了如何將一個元素水平和垂直居中在屏幕上，這可以使你的網頁看起來更專業和吸引人。