HTML和CSS怎么設(shè)置居中 在網(wǎng)頁文檔中，很常見需要將不同元素居中顯示。在這里，我們將通過HTML和CSS來學(xué)習(xí)如何實現(xiàn)這一點。 HTML中的居中 在HTML中，我們使用div元素將不同的內(nèi)容進行分組，然后使用text-align屬性來將這些內(nèi)容居中，如下所示：

<div style="text-align:center;">
<p>這是一段居中的文本</p>
</div>

在上面的代碼中，我們使用style屬性將text-align設(shè)置為center，并將p標(biāo)簽包裹在一個div標(biāo)簽中。這將使p標(biāo)簽中的文本居中顯示。 CSS中的居中 在CSS中，我們有多種居中方式可供選擇。下面我們來看一些常用的方式： 水平居中 首先，我們來看一下如何將元素水平居中。我們可以使用text-align屬性，將它的值設(shè)置為center實現(xiàn)如下：

p {
text-align: center;
}

在上面的代碼中，我們選擇p標(biāo)簽，并將它的text-align屬性設(shè)置為center以實現(xiàn)水平居中。 另一種實現(xiàn)水平居中的方式是使用margin屬性來設(shè)置：

p {
margin: auto;
}

在上面的代碼中，我們選擇p標(biāo)簽，并將它的margin屬性設(shè)置為auto，這將使文本水平居中。 垂直居中 接下來，我們將看一下如何實現(xiàn)垂直居中。我們可以使用vertical-align屬性來設(shè)置元素的垂直對齊方式，如下所示：

img {
display: block;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

在上面的代碼中，我們使用absolute布局將img標(biāo)簽的位置設(shè)置為相對于父元素的偏移量。然后，我們使用top、left、bottom和right屬性將img標(biāo)簽相對于父元素居中。 總結(jié) 通過div元素和text-align屬性，我們可以在HTML中實現(xiàn)簡單的文本居中。而在CSS中，我們可以使用text-align、margin和vertical-align等屬性，快速實現(xiàn)元素的居中顯示。