在網頁設計中，居中對齊是一個非常常見的需求。本文將介紹如何使用CSS將頁面中的元素水平居中。

首先，需要明確的是，要想讓元素水平居中，需要滿足以下兩個條件：

1. 元素的寬度不能是100%，必須是一個固定的寬度。
2. 父元素的寬度必須大于子元素的寬度。

滿足了以上兩個條件之后，就可以開始進行居中操作。

第一種方法是使用text-align屬性。這個屬性通常用于文本的對齊，但是它也可以用來對塊級元素進行對齊。將父元素的text-align屬性設置為center即可實現水平居中。

.parent {
text-align: center;
}
.child {
width: 200px;
}

第二種方法是使用margin屬性。將子元素的左右margin設置為auto即可實現水平居中。需要注意的是，這種方法只適用于塊級元素。

.parent {
width: 800px;
}
.child {
width: 200px;
margin: 0 auto;
}

第三種方法是使用flexbox布局。將父元素的display屬性設置為flex，然后將子元素的margin屬性設置為auto即可實現水平居中。需要注意的是，這種方法只適用于現代瀏覽器。

.parent {
display: flex;
justify-content: center;
}
.child {
width: 200px;
margin: auto;
}

以上三種方法均可實現水平居中。根據實際情況選擇其中一種即可。如果要兼容老舊瀏覽器，建議使用第二種方法。