CSS中的內容居中是網頁設計中經常要用到的樣式，可以讓頁面看起來更加美觀，減少頁面的碎片感。下面我們來學習如何使用CSS實現內容水平居中。

首先，我們需要設置父元素的寬度。如果沒有設置寬度，則內容中的元素會根據其默認的寬度而布局，而不是在中心。因此，我們可以使用CSS的width屬性為該元素設置一個固定寬度。例如，我們可以將父元素的寬度設置為800px：

.parent {
width: 800px;
}

接下來，我們使用text-align屬性，將子元素在父元素中水平居中。text-align屬性影響子元素的文本和內聯元素的排列方式。例如，我們可以將子元素的文本設置為居中對齊：

.child {
text-align: center;
}

還有一種方法是將子元素設置為行內塊元素。這種方法更適用于我們想要居中的元素是塊元素的情況。我們可以使用display屬性將元素設置為行內塊元素。例如：

.child {
display: inline-block;
}

最后，我們將居中對齊的樣式應用于子元素：

.parent {
width: 800px;
text-align: center; /* 或者使用 display: flex; justify-content: center; */
}
.child {
display: inline-block;
text-align: left; /* 重置對齊方式避免文本對齊錯誤 */
}

使用這種方法使內容水平居中，適用于各種元素，無論是圖像、段落文字還是表格等。這種簡單而直接的方法給設計師帶來了巨大的靈活性和創意空間。