Bootstrap 4垂直对齐文本不会在卡片上居中答案

【问题标题】：Bootstrap 4 vertical align text won't center on cardBootstrap 4垂直对齐文本不会在卡片上居中
【发布时间】：2018-04-02 02:23:21
【问题描述】：

尝试垂直对齐以下卡片中的文本中心：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

我完全知道这里有许多类似的问题，但是我尝试了各种解决方案，但似乎没有一个对我的卡有用。

我在 parent、card 和 card-body 上尝试了“my-auto”。我试过“d-flex align-items-center h-100”和“justify-content-center”。还尝试使用显示属性。我错过了什么？

【问题讨论】：

标签： css twitter-bootstrap flexbox

【解决方案1】：

这是使用 flexbox 的 bootstrap 4 文档的解决方案。阅读更多here

你需要知道的，

d-flex -> 使元素成为弹性框。

align-items-center - 垂直对齐内容。

justify-content-center - 水平对齐内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 120px">
      <div class="card-body align-items-center d-flex justify-content-center">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

【讨论】：

不错。我错过了卡体中的 d-flex，以前只在类卡中。
@tealowpillow 很高兴它的修复！
@AjayKumar 太棒了！
@Naren Murali Nice

【解决方案2】：

我错过了什么？

行高：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px; line-height:120px;">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

【讨论】：

不幸的是，当文本必须中断时，这不适用于较小的框。