如何在包装中垂直居中2个不同高度的div

Question

我在另一个容器div中有2个div。我希望这两个div在其父容器中垂直居中

  <div class="wrapper">
    <div class="div1"> some contents here</div>
    <div class="div2"> some contents here</div>
  </div>

Div1和Div2具有不同的尺寸和高度）

这是我的css：

.wrapper{width:100%;
         display:inline-block;
         margin:0 auto;
         }

 .div1{max-width:760px;
       display:inline-block;
       margin:0 auto;}


 .div2{max-width:540px;
       height:auto;
       display:inline-block;
       margin:0 auto;
       vertical-align:top
       }

div1和div2的内容是响应元素（图像或幻灯片）

我想要的是Div 2在主包装中垂直居中，因为它比Div1小一点。

任何线索从哪里开始？ 我试图避免在div2上使用top margin，因为它在移动设备上变得非常混乱。

Answer 1

.wrapper {width:100%;
   display:flex;
   margin:0 auto;
   align-items: center;
}

您可以选择添加flex-wrap:wrap;和justify-content:，其值为space-around或space-between

Answer 2

我建议使用flexbox。这是一个小提琴，展示它是如何运作的 的 https://jsfiddle.net/m0nk3y/xchy52u7/

<强> CSS：

    .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 100%;
        background: green;
    }

    .div1 {
        max-width: 760px;
        height: 100px;
        background: gold;
    }


    .div2 {
        max-width: 540px;
        height: 50px;
        vertical-align: top;
        background: silver;
    }

Answer 3

给出div valid_users并添加width:100%;并使容器clear: both;看到代码段

text-align: center;

.wrapper{width:100%;
         display:inline-block;
         margin:0 auto;
         text-align: center;
         }

.div1 {
    max-width: 760px;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    clear: both;
    text-align: center;
}


.div2 {
    max-width: 540px;
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
    clear: both;
    text-align: center;
}