使用bootstrap 4网格系统使单列居中

Question

我正在尝试使用bootstrap 4网格系统将单个列居中。在bootstrap 3中，我能够做到：

<div class="col-md-10 col-md-offset-2">
</div>

在bootstrap 4中，即使使用新的offset类: offset-md-2，这也不起作用。

下面的方法可以用，但是在页面上有空列会让人感觉不对劲，仅仅是为了居中一列-md-5。

<div class="row">
    <div class="col"></div>
    <div class="col-md-5 align-self-center">
        <img src="img/myimage.gif" style="width: 100%;">
    </div>
    <div class="col"></div>
</div>

Answer 1

作为per the documentation，您可以在行上使用justify-content-center将任意数量的列居中。

<div class="row justify-content-center">
  <div class="col-4">
    One centered column
  </div>
</div>

Answer 2

您可以添加

justify-content-center

在"row“div上。

所以它应该是这样的：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-2">
      //content ...
    </div>
  </div>
</div>

这是官方引导程序文档https://getbootstrap.com/docs/4.0/layout/grid/中的一个示例