Html 如何在包装中垂直居中放置两个不同高度的div

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

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

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

我只希望div2在主包装中垂直居中，因为它比Div1小一点

有什么线索可以从哪里开始？

---

我尽量避免在div2上使用上边距，因为它在移动设备上会变得非常混乱。

给divs

宽度：100%和添加
清除：两者都有并使容器
文本对齐：居中请参见代码片段


.wrapper{宽度：100%；
显示：内联块；
保证金：0自动；
文本对齐：居中；
}
.1分部{
最大宽度：760像素；
宽度：100%；
显示：内联块；
保证金：0自动；
明确：两者皆有；
文本对齐：居中；
}
.第2分部{
最大宽度：540像素；
宽度：100%；
高度：自动；
显示：内联块；
保证金：0自动；
垂直对齐：顶部；
明确：两者皆有；
文本对齐：居中；
}

这里有些内容
这里有些内容

或者，您可能希望添加
flex wrap:wrap和
调整内容：
的值为
空格周围
或
空格之间
我建议使用flexbox。这是一把小提琴，展示了它是如何工作的


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

大家好@git-e-up。谢谢你的建议，但我必须补充一点，这两个div是一致的。我试过你的建议，2号舱高度较小，不垂直居中。一个实际的例子是，2个视频或不同尺寸的720p和480p都包装在主容器中。这两个视频响应迅速。谢谢@git-e-up。我想这正是我想要的。。干杯…谢谢Gen，但是div没有固定的高度。第一组和第二组都有不同的dimensions@MichelleDimwaite你可以去掉高度。我添加了高度，以便更容易直观地看到示例中发生的情况。@Micheledimwaite如果这个解决方案有效，您能告诉我为什么不投票给我的答案作为可接受的答案吗？谢谢。对不起，吉恩，我一定看到了你的反应，把它们弄混了，我已经一天没来了。你的答案肯定很有效。拥有几乎能产生相同结果的非常不同的方法是很好的。有利于学习。再次非常感谢，很抱歉弄错了。。
.wrapper {width:100%;
   display:flex;
   margin:0 auto;
   align-items: center;
}

    .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;
    }