div是HTML中常用的標簽之一，用于創建一個容器，可以用來包含其他HTML元素。在某些情況下，我們需要在一個div中嵌套一個居中的div。本文將介紹幾個代碼案例，詳細解釋如何在HTML中實現這樣的布局。
案例一：

html
<p>第一種方法是使用CSS的flex布局。</p>
<pre>
<div style="display: flex; justify-content: center; align-items: center;">
<div>居中的div</div>
</div>

在這個案例中，我們使用CSS的flex布局來創建一個居中的div。，我們將外層的div的display屬性設置為flex，這樣它將變成一個彈性容器。然后，我們使用justify-content和align-items屬性將內部的div在水平和垂直方向上居中顯示。

案例二：html

第二種方法是使用CSS的position屬性。

<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
居中的div
</div>
</div>

在這個案例中，我們使用CSS的position屬性來實現居中布局。我們將外層的div的position屬性設置為relative，這樣它將成為一個定位容器。然后，我們在內部的div中設置position屬性為absolute，它將脫離文檔流，并相對于外層div進行定位。通過設置top和left屬性為50%，我們將內部div的左上角定位到了外層div的中心位置。最后，我們使用transform屬性和translate函數對內部div進行偏移，使其在水平和垂直方向上居中顯示。

案例三：`html

第三種方法是使用CSS的margin屬性。

<div style="height: 200px; width: 200px; border: 1px solid #000;">
<div style="height: 100px; width: 100px; margin: 50px auto;">
居中的div
</div>
</div>

在這個案例中，我們使用CSS的margin屬性來實現居中布局。我們在內部的div中將水平方向的margin值設置為auto，垂直方向的margin值設置為具體的像素值。這樣，內部div將會在水平方向上居中，而在垂直方向上相對于外層div有一個特定的間距。通過調整這個間距的值，我們可以實現不同的居中效果。

參考了以下文章中的案例： - [How To Center a Div Horizontally and Vertically](https://www.w3schools.com/howto/howto_css_center_div.asp) - [Centering With CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
： 無論是使用flex布局、position屬性還是margin屬性，我們都可以實現在一個div中嵌套一個居中的div。不同的方法適用于不同的場景，我們可以根據具體的需求選擇合適的方法來實現居中布局。使用這些技術，我們可以輕松地創建出美觀且居中的頁面布局。