[分享]css两个div怎么竖直对齐

在实际开发中，经常会碰到两个div需要竖直对齐的情况。本文将介绍两种方法实现这个目标。第一种方法是使用flexbox。flexbox是css3中新增的一种布局方式，它可以轻松实现在容器中的内容基于某个...

在实际开发中，经常会碰到两个div需要竖直对齐的情况。本文将介绍两种方法实现这个目标。

第一种方法是使用flexbox。flexbox是css3中新增的一种布局方式，它可以轻松实现在容器中的内容基于某个轴心对齐。在这个例子中，我们可以将两个div都放在一个父容器中，并将其flex-direction属性设置为column，这样内容就会在竖直方向排列。然后，将align-items属性设置为center，就可以让内容在竖直方向上居中对齐了。

  .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    } 

第二种方法是使用表格布局。虽然表格布局被认为是一种过时的布局方式，但是在某些场景下还是很有用的。可以将两个div都放在同一行，并将它们包裹在一个display属性为table的父容器中。然后，将两个div都设置为display属性为table-cell，同时将它们的vertical-align属性设置为middle，就可以让内容在竖直方向上居中对齐了。

  .container{
        display: table;
    }
    .box{
        display: table-cell;
        vertical-align: middle;
    } 

以上是本文介绍的两种方法，使用它们可以轻松实现两个div的竖直对齐。大家可以根据具体情况灵活选择使用哪种方法。