css上下两个div垂直对齐

在网页开发中，经常会有两个div需要垂直对齐的情况，而为了实现这一点，CSS提供了几种方法。
方法一：使用Flexbox布局
Flexbox布局是目前最为流行的布局方法之一，它可以方便地实现两个div垂直对齐。我们只需要在父元素中设置display:flex，再设置align-items:center即可实现两个div的垂直对齐。下面是示例代码：

  .parent{
            display:flex;
            align-items:center;
            /* 其他属性 */
        } 

方法二：使用display:table-cell
CSS提供了类似于表格的属性，我们可以利用display:table-cell来实现两个div的垂直对齐，这种方法比较直观，只需要将两个div都设置成display:table-cell即可，下面是示例代码：

  .parent{
            display:table;
            /* 其他属性 */
        }
        .child{
            display:table-cell;
            vertical-align:middle;
            /* 其他属性 */
        } 

方法三：使用绝对定位
我们可以利用CSS positioning来实现两个div的垂直对齐，首先我们要将父元素设置为相对定位，将两个子元素设置为绝对定位，再通过top和transform来对齐它们的位置。下面是示例代码：

  .parent{
            position:relative;
            /* 其他属性 */
        }
        .child{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            /* 其他属性 */
        } 

综上所述，以上三种方法均可以实现两个div的垂直对齐，具体选择哪种方法，视情况而定，可根据实际需求进行选择。