Question

我开始使用bootstrap 4并尝试创建一些基本布局。根据{{3}}，我可以通过将类align-items-center应用于它们来垂直对齐块元素。

我尝试在codepen上执行bootstrap 4 docs，但div不是垂直居中的。

我做错了什么？

Answer 1

如果要将这些元素垂直居中，请将html和body的高度和宽度设置为100％。设置宽度和宽度高度为100％会使元素占据其父级的高度。

接下来，相应地设置所有子元素。在引导程序中，width: 100%为w-100，height:100%为h-100。此外，bootstrap使用12列布局，因此将您的班级从col-md-4更改为col-md-6

注意：您可以在代码中将h-100和h-100添加到html和body中以获得相同的效果。

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

如何在Bootstrap 4中垂直居中div？

1 个答案: