如何在列中垂直居中文本（引导程序 4）？答案

【问题标题】：How to vertically center a text in a column (bootstrap 4)?如何在列中垂直居中文本（引导程序 4）？
【发布时间】：2017-06-09 23:51:19
【问题描述】：

如何使列中的文本垂直居中（引导程序 4）？结构基本，见：

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

伙计们！

【问题讨论】：

标签： bootstrap-4 twitter-bootstrap-4

【解决方案1】：

您可以将my-auto 类添加到父<div class="col-md-6"> 来实现此目的。该类在 y 轴上设置自动边距，有关详细信息，请参阅上面的链接。

看起来像这样：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6 my-auto">
      <span>Text to center</span>
    </div>
    <div class="col-xs-6">
      <h1>Hello</h1>
      <h1>Hello</h1>
      <h1>Hello</h1>
    </div>
  </div>
</div>

您可能很想使用vertical alignment 实用程序，但这些实用程序仅适用于内联、内联块、内联表和表格单元格元素。

【讨论】：

记住 Bootstrap 4 中不再有 -xs。

【解决方案2】：

使用 auto-margins (my-auto)，或使用 flexbox 实用程序..

<div class="container">
    <div class="row">
        <div class="col-md-6 align-self-center">
            <span>Text to center</span>
        </div>
        <div class="col-md-6">
            <p>
            ..
            </p>
        </div>
    </div>
</div>

http://www.codeply.com/go/oy8H1bUOL1

另外，还有several other Bootstrap vertical centering options在我的其他回答中解释过。

【讨论】：