<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
border: 1px solid black;
}
.child {
text-align: center;
line-height: 300px;
border: 1px solid red;
}
</style>
在網頁開發中，我們經常需要將子元素垂直居中顯示。在HTML和CSS中，有多種方法可以實現這一效果，其中一種常用的方法是使用<div>元素來創建一個容器，并利用CSS屬性來使其子元素垂直居中。
下面我們將通過幾個代碼案例來詳細解釋如何使用<div>來讓子<div>垂直居中顯示。
，我們需要創建一個容器，可以使用一個<div>元素，并為其添加一個class屬性，如.container。
接下來，在CSS中，我們使用display屬性設置容器的布局方式為flex，并通過align-items和justify-content屬性來實現子元素的垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
border: 1px solid black;
}在上述代碼中，我們設置了容器的高度為300px，并為了方便顯示，添加了一個黑色邊框。
然后，我們再創建一個子元素<div>，并為其添加一個class屬性，如.child。
接下來，在CSS中，我們可以使用text-align和line-height屬性來使子元素垂直居中，并為了方便顯示，添加了一個紅色邊框。
.child {
text-align: center;
line-height: 300px;
border: 1px solid red;
}在上述代碼中，我們設置了子元素的文本對齊方式為居中，并設置了行高為容器的高度，以實現垂直居中的效果。
最后，將子元素放置在容器內部，如下：
<div class="container"> <div class="child"> 這是一個垂直居中顯示的子元素 </div> </div>
通過上述代碼，子元素將被垂直居中顯示在容器內部。
來說，通過使用<div>元素和相應的CSS屬性，我們可以輕松地實現子<div>的垂直居中顯示。這種方法在網頁布局中非常常見，并且兼容各種瀏覽器，是一種簡潔且有效的實現方式。