如何在包装器中垂直居中 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 上使用顶部边距，因为它在移动设备上变得非常混乱。

Answer 1

我建议使用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 2

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

或者，您可能希望添加值为 space-around 或 space-between 的flex-wrap:wrap;和justify-content:

Answer 3

给div 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;
}

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