如何在列中垂直和水平居中放置文本？[副本]

Question

如何在两列中垂直和水平居中放置文本？我用的是bootstrap4。

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

<div class="row">

  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

Answer 1

您可以通过专用类使用flexbox属性：

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-项目

使用flexbox容器上的“对齐项目”实用程序更改flex项目在横轴上的对齐方式（y轴开始，x轴如果flex方向：列）。从“开始”、“结束”、“中心”、“基线”或“拉伸”（浏览器默认设置）中进行选择。

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

<div class="row">

  <div class="col d-flex align-items-center ">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col d-flex align-items-center">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

Answer 2

这是你需要的吗？为行设置高度会更好地可视化。

.col {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row">
  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>
    </h1>
  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

Answer 3

使用“display:flex”属性并应用这些。。。

要水平对齐内容，请对齐内容：居中；

对齐内容垂直对齐-项目：居中；

.col {
    display: flex;
    justify-content: center;
    align-items: center;
}