<div>和<div>是CSS中常用的標簽，用于對網頁內容進行布局和排版。有時候我們希望將兩個<div>垂直居中顯示，讓頁面看起來更加美觀。那么在CSS中，我們可以使用不同的方式來實現這一效果。本文將會通過幾個具體的代碼案例，詳細解釋CSS中如何使兩個<div>垂直居中顯示。
，我們可以使用flex布局來實現這一效果。flex布局是CSS中最為常用的布局方式之一。當我們給包裹兩個<div>的父容器添加以下CSS樣式時，可以將這兩個<div>垂直居中顯示：

<p>/* CSS代碼 */</p>
<p> .container {</p>
<p>   display: flex;</p>
<p>   justify-content: center;</p>
<p>   align-items: center;</p>
<p> }</p>

以上代碼中，我們將包裹兩個<div>的父容器設為flex布局，并使用justify-content和align-items屬性分別將內容在主軸和側軸上居中顯示。這樣一來，兩個<div>就會在垂直方向上居中顯示。
另一種實現方式是使用絕對定位。我們可以給兩個<div>分別設置如下的CSS樣式：

<p>/* CSS代碼 */</p>
<p>  .container {</p>
<p>   position: relative;</p>
<p>  }</p>
<p>  .item {</p>
<p>   position: absolute;</p>
<p>   top: 50%;</p>
<p>   transform: translateY(-50%);</p>
<p>  }</p>

以上代碼中，我們為兩個<div>設置了相對定位和絕對定位。然后，我們使用top屬性將第一個<div>向下偏移50%的高度，再使用transform屬性將其向上移動50%的高度。這樣一來，兩個<div>就會在垂直方向上居中顯示。
除此之外，我們還可以使用表格布局來實現這一效果。我們可以給包裹兩個<div>的父容器添加以下CSS樣式：

<p>/* CSS代碼 */</p>
<p> .container {</p>
<p>   display: table;</p>
<p>   margin: 0 auto;</p>
<p> }</p>

以上代碼中，我們將包裹兩個<div>的父容器設為表格布局，并通過設置margin屬性來使其在水平方向上居中顯示。這樣一來，兩個<div>就會在垂直方向上居中顯示。
以上是三種常見的CSS方式，用于實現兩個<div>在垂直方向上居中顯示。根據實際情況，我們可以根據具體需求選擇適合的方式來實現布局。希望本文所提供的代碼案例能夠對讀者理解和使用CSS實現垂直居中布局有所幫助。