在網(wǎng)頁設(shè)計中，經(jīng)常會遇到需要將兩個元素垂直居中的情況，這時我們可以使用CSS來實現(xiàn)這一效果。下面我們將介紹兩種方法。

方法一：
在父元素上添加以下樣式：
display: flex;
align-items: center;
justify-content: center;
其中，display: flex; 將父元素設(shè)置為彈性盒子，align-items: center; 將子元素垂直居中，justify-content: center; 將子元素水平居中。
示例代碼如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container .child {
width: 200px;
height: 100px;
}
<div class="container">
<div class="child">
<p>這是一個子元素</p>
<p>這是另一個子元素</p>
</div>
</div>
方法二：
在父元素上添加以下樣式：
position: relative;
在子元素上添加以下樣式：
position: absolute;
top: 50%;
transform: translateY(-50%);
其中，position: relative; 為父元素設(shè)置相對定位，position: absolute; 為子元素設(shè)置絕對定位。top: 50%; 把子元素的上邊緣定位在父元素的中央，transform: translateY(-50%); 把子元素的高度一半移動到父元素的中央，實現(xiàn)垂直居中。
示例代碼如下：
.container {
position: relative;
width: 600px;
height: 400px;
}
.container .child {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
height: 100px;
}
<div class="container">
<div class="child">
<p>這是一個子元素</p>
<p>這是另一個子元素</p>
</div>
</div>