CSS和HTML5都是我們?nèi)粘＞W(wǎng)頁(yè)制作中經(jīng)常使用的技術(shù)，其中CSS的一個(gè)重要功能就是實(shí)現(xiàn)頁(yè)面元素的居中，尤其是垂直居中。下面我們來(lái)看一下HTML5和CSS實(shí)現(xiàn)垂直居中的代碼。

html {
height: 100%;
}
body {
height: 100%;
display: flex;
align-items: center;
}
.container {
width: 50%;
margin: auto;
text-align: center;
}
.container p {
background-color: #a1a1a1;
color: #fff;
line-height: 120px; /* 相對(duì)于容器高度的比例 */
}

上述代碼中，我們首先給HTML和body元素設(shè)置了100%的高度，這是垂直居中的前提條件。接著我們使用了flex布局，將元素在垂直方向上居中對(duì)齊。我們使用了一個(gè).container類來(lái)包裹要居中的元素，然后設(shè)置了容器寬度為50%，即占據(jù)父元素的50%的寬度，然后使用了margin: auto來(lái)使得容器水平居中。最后我們使用了一個(gè)p標(biāo)簽作為要居中的元素，設(shè)置了背景顏色、字體顏色和行高，其中行高的比例可以根據(jù)實(shí)際情況進(jìn)行調(diào)整。

總之，使用HTML5和CSS實(shí)現(xiàn)垂直居中確實(shí)是一個(gè)比較常見的場(chǎng)景，掌握這種技術(shù)可以方便我們制作出更美觀、大氣的網(wǎng)頁(yè)設(shè)計(jì)。