html - 如何通过Bootstrap 4在“col-sm-12”中垂直居中放置文本？

我正在尝试使文本在整个黄色空间内垂直居中。我一直在尝试按照文档中的建议在行上实现“ align-items-center”，以及“ my-auto”类。我不确定自己在做什么错。

#heading-cont {
    background-color: #F7CE38;
    height: 10rem;
}

.white {
    color: white;
}

.title {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

.description {
    font-family: 'Pathway Gothic One', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid" id="heading-cont">
    <div class="row">
      <div class="col-sm-12 my-auto">
        <h1 class="title white text-center">Digital</h1>
        <h4 class="description white text-center">This is the description.</h4>
      </div>
    </div>
  </div>
</section>

CodePen Demo

最佳答案

（我假设您的意思是“垂直居中”；由于示例中只有一列，因此没有任何对齐的对象。）

container-fluid在Bootstrap中的最小高度为10rem。要使文本垂直居中，您需要拉伸row使其匹配：

#heading-cont > .row {
    height: 100%;
}

关于html - 如何通过Bootstrap 4在“col-sm-12”中垂直居中放置文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46673912/