CSS是用來美化頁面布局和樣式的一種技術。在網頁制作中，經常會遇到子div在父div中居中顯示的需求。那么，如何使用CSS來實現這一效果呢？
，我們需要了解一些基礎概念。在HTML中，div元素是最常用的容器元素，它可以用來包裹其他的HTML元素。在CSS中，我們可以使用選擇器來選擇div元素，并通過設置CSS屬性來控制其樣式。
要實現子div在父div中居中顯示，我們可以使用CSS的flex布局。flex布局是一種彈性盒子模型，它可以讓元素在父容器中靈活地改變大小和位置。下面我們來看幾個代碼案例，以更加詳細地說明如何使用flex布局實現子div居中顯示。
案例一： 我們需要在HTML文件中創建一個父div和一個子div。父div的id為container，子div的id為box。我們可以通過CSS代碼為它們設置一些基本樣式，比如顏色、寬度和高度等。

<code>
<pre>
HTML代碼：
<div id="container">
<div id="box"></div>
</div>
<br>
CSS代碼：
#container {
background-color: #ccc;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<br>
#box {
background-color: #f00;
width: 100px;
height: 100px;
}

在上面的代碼中，我們通過設置父div的display屬性為flex，讓它成為一個彈性容器。然后，通過設置justify-content屬性為center，將子div在水平方向上居中顯示；通過設置align-items屬性為center，將子div在垂直方向上居中顯示。由此，我們就實現了子div在父div中的居中顯示效果。
案例二： 在某些情況下，我們可能希望子div在父div中水平居中，但垂直方向上不居中，而是上下留有一定的距離。此時，我們可以使用CSS的margin屬性來實現。

<code>
<pre>
HTML代碼：
<div id="container">
<div id="box"></div>
</div>
<br>
CSS代碼：
#container {
background-color: #ccc;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: flex-start;
}
<br>
#box {
background-color: #f00;
width: 100px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
}

在上面的代碼中，我們通過設置父div的align-items屬性為flex-start，將子div在垂直方向上向上對齊顯示。然后，通過設置子div的margin-top和margin-bottom屬性來控制上下距離。通過調整這兩個屬性的值，我們可以實現子div在父div中上下居中顯示的效果。
綜上所述，我們可以利用CSS的flex布局來實現子div在父div中居中顯示。通過設置父div的display屬性為flex，justify-content屬性為center，align-items屬性為center，我們可以實現水平和垂直居中顯示的效果。如果希望子div在垂直方向上不居中，我們可以使用margin屬性來控制間距。掌握這些技巧，我們可以更好地控制網頁布局，實現更好的用戶體驗。