CSS 水平居中是網頁設計中的重要技能之一。在 CSS 中，實現水平居中有多種方式，比如使用 text-align 屬性、使用 margin 屬性、使用 display 和 margin 屬性等。本篇文章將介紹如何使用 CSS 實現水平居中。

.horizontal-center {
display: flex;
justify-content: center;
}

方法一：使用 display 和 justify-content 屬性

使用這種方法需要先將要居中的元素設為塊級元素，可以通過設置 display 為 block、inline-block 或 flex 來實現。然后再通過設置 justify-content 為 center 來實現水平居中。

示例代碼：

.horizontal-center {
display: block;
margin: 0 auto;
}

方法二：使用 display 和 margin 屬性

使用這種方法同樣需要將要居中的元素設為塊級元素，可以通過設置 display 為 block、inline-block 或 table 來實現。然后再通過設置 margin 屬性左右值為 auto 來實現水平居中。

示例代碼：

.horizontal-center {
display: inline-block;
text-align: center;
}
.horizontal-center span {
display: inline-block;
text-align: left;
margin: 0 auto;
}

方法三：使用 text-align 屬性

使用這種方法需要將要居中的元素設為行內元素（如 span、a 標簽），然后通過設置父元素的 text-align 屬性為 center 來實現水平居中。

示例代碼：

.horizontal-center {
display: flex;
justify-content: center;
align-items: center;
}

方法四：使用 flex 和 align-items 屬性

使用這種方法需要將要居中的元素的父元素設置為 flex 容器，然后通過設置 align-items 屬性為 center 來實現水平居中。

以上是 CSS 實現水平居中的四種方法，可以根據實際情況選擇適合的方法。既然已經知道了如何實現水平居中，就可以更好地實現網頁的布局和設計了。