HTML水平居中代碼 在HTML中，我們經常需要將一些元素水平居中，比如圖片、文字等等。以下是幾種常見的HTML水平居中代碼。 1. 使用text-align屬性 使用text-align屬性可以將一個元素的文本內容水平居中，如下所示：

<style>
.center {
text-align: center;
}
</style>
<div class="center">
<p>這里是需要居中的內容</p>
</div>

2. 使用margin屬性 通過設置一個盒子元素的左右margin值為auto，可以實現水平居中，如下所示：

<style>
.center {
width: 50%; /* 設置盒子寬度 */
margin: 0 auto; /* 設置左右margin為自動 */
}
</style>
<div class="center">
<p>這里是需要居中的內容</p>
</div>

3. 使用flex布局 使用display: flex;和justify-content: center;屬性可以實現水平居中，如下所示：

<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.center {
width: 50%; /* 設置盒子寬度 */
}
</style>
<div class="container">
<div class="center">
<p>這里是需要居中的內容</p>
</div>
</div>

總結 以上是幾種常見的HTML水平居中代碼，可以根據實際需求選擇使用。需要注意的是，水平居中代碼一般應用于塊級元素，行內元素可以使用display: inline-block;屬性先將其變為塊級元素，再使用上述方法進行水平居中。