<div>容器居中是指將一個<div>元素水平居中于其父級元素。這在網頁中經常使用，特別是在響應式設計中。通過以下幾個代碼案例，我們將詳細說明如何使用不同的方法實現<div>容器的水平居中。
第一種方法是使用CSS的Flexbox屬性。Flexbox是一種讓網頁布局更加靈活且易于維護的方法。要使<div>容器水平居中，我們可以將其父級容器的display屬性設置為flex，并使用justify-content屬性將子元素水平居中。以下是一個示例代碼：

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

第二種方法是使用CSS的text-align屬性。這種方法適用于內部元素是塊級元素的情況。我們可以將外部容器的text-align屬性設置為center，以使其內部的塊級元素水平居中。以下是一個示例代碼：

.container {
text-align: center;
}

第三種方法是使用CSS的position和transform屬性。這種方法適用于內部元素是行內元素或定位元素的情況。我們可以將外部容器的position屬性設置為relative，使其成為相對定位容器，然后通過設置子元素的position屬性為absolute和left屬性為50%，再結合使用transform屬性的translateX(-50%)將其水平居中。以下是一個示例代碼：

.container {
position: relative;
}
<br>
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

通過上述三種方法，我們可以輕松地實現<div>容器的水平居中。選擇哪種方法取決于你的具體需求和項目的要求。希望這些示例代碼能對你理解和運用<div>容器的水平居中有所幫助！