Css 如何在引导4中垂直居中div？

我开始使用Bootstrap4，并尝试创建一些基本布局。根据，我可以通过对块元素应用class

align items center

垂直对齐它们

我试着在代码笔上做a，但div并没有垂直放置在中心

---

我做错了什么？

如果要将这些元素垂直居中，请将html和正文的高度和宽度设置为100%。将“宽度和高度”设置为100%将使元素具有其父元素的高度

接下来，相应地设置所有子元素。在引导中，宽度：100%为

w-100

和高度：100%为

h-100

。此外，引导使用12列布局，因此将类从

col-md-4

更改为

col-md-6

注意：您可以在代码的html和正文中添加w-100和h-100，以获得相同的效果

<style>
    html,body{
      width:100%;
      margin:0;
        height:100%;
    }
</style>

<div class="container w-100 h-100">
    <div class="row align-items-center h-100">
      <div class="col-md-6">
        <h1 class="alert alert-primary">Vertical</h1>
      </div>
      <div class="col-md-6">
        <h1 class="alert alert-success">Vertical</h1>
      </div>
    </div>
  </div>

html，正文{
宽度：100%；
保证金：0；
身高：100%；
}
垂直的
垂直的

Bootstrap使用12列布局系统尝试将col-md-4更改为col-md-6（假设您需要2列）。@JonathanChaplin我将col-md-4更改为col-md-6，但此更改仅影响水平位置，而我正在寻找将这2个div与中心垂直Yok对齐，您需要在多个图元上添加w-100和h-100以获得全高和全宽。我将在下面发布一个解决方案。