Question

我正在使用引导程序4，并试图使“标题1”垂直居中，但它一直浮动到顶部。我在做什么错了？

<div class="align-items-center d-flex h-100 justify-content-center vh-100">
  <div style="width: 50vw;">
    <img src="http://pinegrow.com/placeholders/img12.jpg" style="width: 100%;"/>
  </div>
  <div style="width: 50vw; background-image: url('Rectangle.png'); background-repeat: repeat;" class="h-100">
    <div class="align-items-center justify-content-center">
        <h1 class="text-center">Heading 1</h1>
    </div>
  </div>
</div>

Answer 1

在标题1的父div上，您可以像这样添加另外2个Bootstrap 4类：

<div class="h-100 d-flex align-items-center justify-content-center">
    <h1 class="text-center">Heading 1</h1>
</div>

.h-100 ->使元素的高度为100％（这样它将继承其父元素的高度）

.d-flex ->将显示规则设置为flex。这是.align-items-center和.justify-content-center正常工作所必需的

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

1 个答案: