在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將元素居中顯示，特別是在開發(fā)響應(yīng)式網(wǎng)站時(shí)，要求網(wǎng)站在不同設(shè)備上都能夠垂直居中顯示。下面我們介紹一些html、css、div居中的代碼。

//html代碼
<div class="center">
<p>要居中顯示的內(nèi)容</p>
</div>
//css代碼
.center {
position: relative; /* 相對(duì)定位 */
top: 50%; /* 上下居中，相對(duì)于父元素的50%的位置 */
transform: translateY(-50%); /* 用transform屬性在垂直方向上移動(dòng)自己高度的50%達(dá)到居中顯示的效果 */
text-align: center;  /* 水平居中 */
}
//div居中的代碼
.center {
margin: 0 auto; /* 水平居中 */
display: flex; /* 容器元素flex布局 */
justify-content: center; /* 子元素沿主軸居中（水平居中） */
align-items: center; /* 子元素沿交叉軸居中（垂直居中） */
}

以上代碼可以讓元素在不同設(shè)備上都能夠完美地垂直居中顯示，幫助我們實(shí)現(xiàn)更加出彩的網(wǎng)頁(yè)設(shè)計(jì)。