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

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

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

p {
text-align: center;
}

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

p {
margin: auto;
}

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

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

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