如何使用 Bootstrap 4 在“col-sm-12”中垂直居中文本？答案

【问题标题】：How can I vertically center my text within a "col-sm-12" with Bootstrap 4?如何使用 Bootstrap 4 在“col-sm-12”中垂直居中文本？
【发布时间】：2017-10-12 05:52:44
【问题描述】：

我试图让文本在整个黄色空间内垂直居中。正如他们的文档中所建议的那样，我一直在尝试在行上实现“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

【问题讨论】：

标签： html css twitter-bootstrap flexbox twitter-bootstrap-4

【解决方案1】：

（我假设您的意思是“垂直居中”；因为在您的示例中只有一列，所以没有什么可以将它与 对齐。）

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

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

【讨论】：

你是对的。抱歉措辞，仍然是初学者。不过这效果很好！！非常感谢。一旦允许我这样做，将标记为正确。

【解决方案2】：

您需要将行的高度设置为 100%，以便有空间使文本居中。

.row {
   height: 100%;
 }

【讨论】：

【解决方案3】：

您可以将一个类（在我的示例中为 .x）添加到 #heading-cont 并对其应用以下 CSS 以使其成为 flexbox 容器并使其内容垂直居中：

.x {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

https://codepen.io/anon/pen/GMdazJ

【讨论】：

【解决方案4】：

首先，使用 bootstrap 4 类，就像它们应该被使用的那样： class="d-flex flex-column justify-content-center"，然后就不需要给行加上高度了。如果不需要，不要制定单独的 css 规则来重复现有的实用程序类。

/*containers*/

.container-fluid {
  padding: 0;
}

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

#subheading {
  height: 8rem
}

#heading-cont > .row {
 /* height: 10rem;*/
}

#subheading > .row {
    /*height: 100%;*/
}

/*type + color*/

h1 {
  font-size: 3rem !important;
}

h3 {
  font-size: 2rem !important;
}

.white {
  color: white;
}

.margin-b {
  margin-bottom: 2rem;
}


.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;
}

/*social-prof*/

.box {
  background-color: #E0E0E0;
  height: 20rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title white text-center">Digital</h1>
        <h3 class="description white text-center">This is the description.</h3>
      </div>
    </div>
  </div>
</section>

<section class="social-prof">
  <div class="container-fluid d-flex flex-column justify-content-center" id="subheading">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title text-center">Branding</h1>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="bu">
    <div class="row">
      <div class="col-sm-12">
        <div class="box">
          <div class="layer">
            <h3 class="description white text-center margin-b">Small Business Services</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/anon/pen/oGyrPg

【讨论】：