div中的div居中垂直居中是指在網頁布局中，將一個div元素居中且垂直居中顯示在另一個div元素中。通過一些CSS樣式和技巧，我們可以很容易地實現這個效果。下面將通過幾個代碼案例來詳細解釋和說明。
第一個案例是使用flexbox布局來實現div中的div居中垂直居中。在父div元素上使用display:flex和align-items:center屬性，可以使子元素在垂直方向上居中對齊。具體代碼如下：

<p><div class="parent"></p>
<p><div class="child">Content</div></p>
<p></div></p>

<p>.parent {</p>
<p>  display: flex;</p>
<p>  align-items: center;</p>
<p>  height: 300px;</p>
<p>  border: 1px solid black;</p>
<p>}</p>
<br>
    <p>.child {</p>
<p>  width: 200px;</p>
<p>  height: 100px;</p>
<p>  background-color: #ccc;</p>
<p>}</p>

在這個例子中，parent類定義了div的樣式，設置它的display屬性為flex，align-items屬性為center。height屬性設置為300px是為了讓父div有一定的高度。child類定義了子div的樣式，設置它的寬度為200px，高度為100px，背景顏色為#ccc。運行這段代碼后，子div會在父div中居中且垂直居中顯示。
第二個案例是使用position屬性和transform屬性來實現div中的div居中垂直居中。這種方法適用于不支持flexbox的舊版本瀏覽器。具體代碼如下：

<p><div class="parent"></p>
<p><div class="child">Content</div></p>
<p></div></p>

<p>.parent {</p>
<p>  position: relative;</p>
<p>  height: 300px;</p>
<p>  border: 1px solid black;</p>
<p>}</p>
<br>
    <p>.child {</p>
<p>  position: absolute;</p>
<p>  width: 200px;</p>
<p>  height: 100px;</p>
<p>  top: 50%;</p>
<p>  left: 50%;</p>
<p>  transform: translate(-50%, -50%);</p>
<p>  background-color: #ccc;</p>
<p>}</p>

在這個例子中，parent類定義了div的樣式，設置它的position屬性為relative，height屬性設置為300px，border屬性為1px solid black。child類定義了子div的樣式，設置它的position屬性為absolute，width屬性為200px，height屬性為100px。top屬性和left屬性都設為50%，表示在父div中的水平和垂直方向上都居中。transform屬性通過translate()函數來實現相對于自身寬高的偏移，將子div在水平和垂直方向上都居中。背景顏色為#ccc。運行這段代碼后，子div會在父div中居中且垂直居中顯示。
以上是關于div中的div居中垂直居中的兩個案例，分別使用了flexbox布局和position屬性與transform屬性相結合的方法來實現。通過這些CSS樣式和技巧，我們可以讓網頁布局更加美觀，使內容在div中居中且垂直居中顯示。希望本文對您有所幫助。