在CSS中，我們可以使用多種方法使兩個盒子上下對齊，以下是幾種常見的對齊方法：
1、使用Flexbox：
Flexbox是一個強(qiáng)大的布局工具，可以輕松實(shí)現(xiàn)盒子的對齊，我們可以將兩個盒子包裹在一個flex容器中，并設(shè)置align-items: center;來實(shí)現(xiàn)垂直對齊。
```html
<div style="display: flex; align-items: center;">
<div style="height: 100px; background: #f00;"></div>
<div style="height: 200px; background: #0f0;"></div>
</div>
```
2、使用Grid：
Grid布局也可以幫助我們輕松實(shí)現(xiàn)盒子的對齊，我們可以將兩個盒子放置在一個grid容器中，并設(shè)置align-content: center;來實(shí)現(xiàn)垂直對齊。
```html
<div style="display: grid; align-content: center;">
<div style="height: 100px; background: #f00;"></div>
<div style="height: 200px; background: #0f0;"></div>
</div>
```
3、使用***定位：
通過***定位，我們可以將兩個盒子固定在頁面的特定位置，這種方法需要明確設(shè)置盒子的top和bottom屬性，以實(shí)現(xiàn)垂直對齊。
```html
<div style="position: relative;">
<div style="position: absolute; top: 50%; transform: translateY(-50%); height: 100px; background: #f00;"></div>
<div style="position: absolute; top: 50%; transform: translateY(-50%); height: 200px; background: #0f0;"></div>
</div>
```
4、使用CSS變量：
通過CSS變量，我們可以定義一個基準(zhǔn)值，并根據(jù)該值計算盒子的位置，這種方法適用于當(dāng)盒子的高度是動態(tài)變化時。
```html
<div style="--box-height: 50%;">
<div style="height: var(--box-height); background: #f00;"></div>
<div style="height: var(--box-height); background: #0f0;"></div>
</div>
```
是幾種常見的使兩個盒子上下對齊的方法，你可以根據(jù)自己的需求和布局場景選擇***適合的方法。
