html - 使用边距 : auto; (Bootstrap) 时 Div 未居中

Question

我有一个来自 bootstrap 模板网站的工作示例网站，我正在分析代码以了解他们是如何创建它的。即他们如何将位于 here 的第一页上的文本居中.该片段的代码是，

<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
    <div class="container m-auto">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                   ...
            </div>
            <div class="col-lg-8 mx-auto">
                   ...
            </div>
        </div>
    </div>
</header>

然后我注意到 m-auto 正在对中。然而，当我尝试为自己从头开始创建它并创建这个基本代码时，

 <style>
    #frontpage {
      height: 100vh;
      width: 100vw;
    }
  </style>

<section id="frontpage">
  <div class="container m-auto">
    <div class="row">
      <div class="col-8">
        <h1> YOU CAN DO IT </h1>
      </div>
      <div class="col-8">
        <h1> I should be centered </h1>
      </div>
    </div>
  </div>
</section>

它根本不居中。我在这里忘记了什么？

我怀疑容器在它的父容器中居中，它占据了页面。

Answer 1

您已经复制了代码，但如果猜对了，则不会包含它们的样式。不管怎样，我已经更正了，请试试这个。

 <style>
        #frontpage {
          height: 100vh;
          width: 100%;
        }

.center-me{
    margin: auto;
    width: 60%;
    text-align: center;
}
      </style>

    <section id="frontpage">
            <div class="center-me">
                    <div >
                      <h1> YOU CAN DO IT </h1>
                    </div>
                    <div >
                      <h1> I should be centered </h1>
                    </div>
      </div>
    </section>