<div>子居中是指在HTML中使用<div>元素的情況下，如何將其中的子元素居中顯示。通過使用一些CSS屬性和技巧，我們可以實現在<div>元素中居中顯示子元素的效果。
下面我們將通過幾個代碼案例來詳細解釋和說明<div>子居中的實現方法。
第一個案例是使用CSS的flexbox布局來實現<div>子元素的居中。flexbox是CSS中用于實現彈性布局的一種屬性。在下面的代碼中，我們將<div>元素的display屬性設置為flex，同時使用justify-content和align-items屬性將子元素居中顯示。

<div style="display: flex; justify-content: center; align-items: center;">
<p>子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
</div>

在上面的代碼中，我們設置了<div>元素的display屬性為flex，這樣它的子元素就可以按照一行排列。justify-content屬性設置為center將子元素在水平方向上居中顯示，align-items屬性設置為center將子元素在垂直方向上居中顯示。
第二個案例是使用CSS的position屬性來實現<div>子元素的居中。我們可以將<div>元素的position屬性設置為relative，然后將子元素的position屬性設置為absolute，并通過設置top、bottom、left、right屬性來控制子元素的位置。

<div style="position: relative;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<p>子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
</div>
</div>

在上面的代碼中，我們將<div>元素的position屬性設置為relative，這樣它的子元素的position屬性就可以相對于<div>元素進行定位。接著，我們將子元素的position屬性設置為absolute，并使用top和left屬性將子元素在父元素中居中顯示。同時，通過transform屬性的translate函數來微調子元素的位置，使其垂直和水平方向上都居中顯示。
第三個案例是使用CSS的grid布局來實現<div>子元素的居中。grid布局是CSS中用于實現網格化布局的一種屬性。在下面的代碼中，我們將<div>元素的display屬性設置為grid，并使用place-items屬性將子元素居中顯示。

<div style="display: grid; place-items: center;">
<p>子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
</div>

在上面的代碼中，我們將<div>元素的display屬性設置為grid，這樣它的子元素會以網格的形式進行排列。然后，使用place-items屬性將子元素在網格中居中顯示。
通過以上幾個代碼案例，我們可以看到，使用不同的CSS布局屬性和技巧可以實現<div>子元素的居中顯示效果。在實際開發中，可以根據具體情況選擇合適的方法來實現<div>子居中的效果。