只是无法通过引导程序或香草flexbox使flex垂直居中放置元素

问题描述

我在这里丢了我的弹珠。我浏览过一些在stackoverflow上可以找到与我的问题，flexBox自己的资源和bootstrap的tut相匹配的文章，并且我尝试自己实现这些内容。我仍然缺少（可能是可能的）基本的CSS值，或者我仍然缺少的基本的flexBox值，或者是我完全误解的东西。我正在使用Bootstrap 4，但从未尝试使用flex垂直居中放置元素。

包含Bootstrap类的我的标记内容显示在下面。 H1元素已成功沿x轴居中，但未沿y轴居中。

<section>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-center">
                    <h1 class="neoretrodraw logo text-center">logo Text Here</h1>
                </div>
            </div>
        </div>
    <div>
</section>

请不要简单地指向同一网站上的其他帖子或其他帖子-我很清楚，这个问题之前可能已经以其他形式回答过，并且已经完成了阅读。我觉得这是一件简单的事情，我犯了一个简单的错误。

解决方法

您只需要在flex类中使用类vh-100，以x为中心的y-axix和h1

实时演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="vh-100 d-flex align-items-center justify-content-center">
          <h1 class="neoretrodraw logo text-center">Logo Text Here</h1>
        </div>
      </div>
    </div>
  </div>
</section>