[分享]css两个盒子上下对齐

CSS中，如何让两个盒子上下对齐是一个常见的问题。以下是两种方法。

方法一：使用flexbox

.container{
    display: flex;
    align-items: center;
}
.box1{
    height: 100px;
}
.box2{
    height: 80px;
} 

首先，将两个盒子包裹在一个容器中，对容器应用display:flex。然后应用align-items:center，使两个盒子在容器内上下居中对齐。

注意: 在使用flexbox的时候，需要注意浏览器兼容性问题，需要根据实际情况添加相应的前缀。

方法二：使用line-height

.container{
   line-height: 100px;
}
.box1{
    height: 100px;
}
.box2{
    height: 80px;
} 

同样，将两个盒子包裹在一个容器中。然后在容器中设置一个合适的line-height值，使其与box1的高度相等。这样盒子2的内容将在盒子的垂直中心对齐。

无论使用哪种方法，都需要对两个盒子的高度进行考虑，保证布局的正确性。