div 里面兩個 div 垂直居中顯示是一種常見的布局需求。當我們希望將兩個 div 水平放置在一個父 div 中，并且使它們在垂直方向上居中顯示時，可以使用一些 CSS 技巧來實現這個效果。本文將介紹幾個常用的代碼案例來詳細解釋和說明這個問題。
，我們來看一種最基本的方法，使用 flex 布局來實現垂直居中顯示。在父 div 上設置 display: flex; 和 align-items: center; 屬性，可以使子 div 在垂直方向上居中顯示。以下是代碼示例：

<div style="display: flex; align-items: center;">
<div>第一個 div</div>
<div>第二個 div</div>
</div>

接下來，我們來看一種常用的方法，使用絕對定位和 transform 屬性來實現垂直居中顯示。在父 div 上設置 position: relative; 屬性，而在子 div 上設置 position: absolute; 和 top: 50%; transform: translateY(-50%); 屬性，可以使子 div 垂直居中顯示。以下是代碼示例：

<div style="position: relative;">
<div style="position: absolute; top: 50%; transform: translateY(-50%);">第一個 div</div>
<div style="position: absolute; top: 50%; transform: translateY(-50%);">第二個 div</div>
</div>

此外，還可以使用表格布局來實現垂直居中顯示，通過將父 div 的 display 屬性設置為 table，子 div 的 display 屬性設置為 table-cell，以及 vertical-align 屬性設置為 middle，可以使子 div 垂直居中顯示。以下是代碼示例：

<div style="display: table;">
<div style="display: table-cell; vertical-align: middle;">第一個 div</div>
<div style="display: table-cell; vertical-align: middle;">第二個 div</div>
</div>

除了上述方法，還可以使用 grid 布局來實現垂直居中顯示。在父 div 上設置 display: grid; 和 align-items: center; 屬性，可以使子 div 垂直居中顯示。以下是代碼示例：

<div style="display: grid; align-items: center;">
<div>第一個 div</div>
<div>第二個 div</div>
</div>

綜上所述，我們介紹了幾種常用的代碼案例來詳細解釋和說明 div 里面兩個 div 垂直居中顯示的方法。根據不同的布局需求和瀏覽器支持情況，可以選擇適合的方法來實現這個效果。通過靈活運用 CSS 技巧，我們可以輕松地實現各種布局需求。