在網(wǎng)頁開發(fā)中，我們經(jīng)常需要將某些元素（如 文本、圖片、按鈕等）居中顯示，這篇文章將介紹如何使用 HTML 設(shè)置 div 元素居中顯示。

// HTML 代碼
<div class="container">
<p>這是一個 div 元素</p>
</div>

我們需要在外層包裹一個 div 元素，然后為該元素添加一個 class 屬性，以方便 CSS 樣式的設(shè)置。

// CSS 代碼
.container {
display: flex;
justify-content: center;
align-items: center;
}

以上 CSS 代碼中，我們將 display 屬性設(shè)置為 flex，以創(chuàng)建彈性布局。

使用 justify-content 和 align-items 屬性，分別設(shè)置水平和垂直居中。justify-content 可以設(shè)置以下值：

• flex-start：默認(rèn)值，放置在彈性容器的開頭
• flex-end：放置在彈性容器的結(jié)尾
• center：居中顯示
• space-between：平均分布在彈性容器內(nèi)，兩端不留空白
• space-around：平均分布在彈性容器內(nèi)，兩端留有相同的空白

align-items 可以設(shè)置以下值：

• flex-start：放置在彈性容器的頂部
• flex-end：放置在彈性容器的底部
• center：居中顯示
• baseline：對齊彈性容器的基線
• stretch：默認(rèn)值，拉伸彈性項目以填充空白

到這里，一個居中顯示的 div 元素就完成了。如果您想居中顯示其他元素，只需要將類名設(shè)置為 .container，并按照上述樣式設(shè)置即可。