CSS在網(wǎng)頁(yè)排版中扮演著非常重要的角色，其中對(duì)于元素居中顯示的控制也是必不可少的。這篇文章將介紹如何使用CSS將一個(gè)塊元素在網(wǎng)頁(yè)中水平和垂直居中。

/* HTML代碼 */
<div class="container">
<div class="box">這是要居中的塊</div>
</div>
/* CSS代碼 */
.container {
position: relative;
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先，在HTML中我們需要?jiǎng)?chuàng)建一個(gè)容器元素（可以是 div、section 等），并在容器元素中創(chuàng)建一個(gè)要居中的塊元素。

接著，在 CSS 中我們給容器元素設(shè)置 position 屬性為 relative，這樣我們能夠在容器內(nèi)使用 absolute 來(lái)對(duì)子元素進(jìn)行絕對(duì)定位。然后，對(duì)于要居中的塊元素，我們?cè)O(shè)置其 position 為 absolute（即脫離文檔流）。接下來(lái)，我們通過(guò)將 top 和 left 值設(shè)為 50%，讓塊元素的左上角與容器元素的中心重合。最后，我們使用 transform 屬性中的 translate 函數(shù)將塊元素上移 50% 自身高度和左移 50% 自身寬度，就能夠?qū)崿F(xiàn)水平和垂直居中的效果。

使用這種方式能夠較為方便地實(shí)現(xiàn)元素居中，在實(shí)際開(kāi)發(fā)中也非常常見(jiàn)。當(dāng)然，在不同的情況下，我們可能需要使用其他方式來(lái)實(shí)現(xiàn)居中，比如使用 flex 布局。