如何在 bootstrap4 列中垂直和水平居中此文本？ [复制]答案

【问题标题】：How to vertically and horizontally center this text inside bootstrap4 columns? [duplicate]如何在 bootstrap4 列中垂直和水平居中此文本？ [复制]
【发布时间】：2017-11-17 16:59:07
【问题描述】：

我有这个 bootstrap 4 网格，其中一行高度为 200 像素，两列：

<div class="row" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <span>How to center this vertically/horizontally</span>
   </div>
   <div class="col-md-2">
      <span>This too</span>
   </div>
</div>

我不确定如何将两列中的文本垂直和水平居中。

这是一个小提琴：http://jsfiddle.net/x1hphsvb/31/

我在 stackoverflow 上查看了类似的问题/答案，但我找不到对我的案例实际有效的答案。

那该怎么做呢？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

使用最新版本（Bootstrap 4 alpha 6）。

使用 align-items-center 类垂直居中，text-center 水平居中...

<div class="row text-center align-items-center" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <span>How to center this vertically/horizontally</span>
   </div>
   <div class="col-md-2">
      <span>This too</span>
   </div>
</div>

https://www.codeply.com/go/vaGYMJHA3T

【讨论】：

【解决方案2】：

您可以通过将两列下的元素居中来水平和垂直居中文本。

你需要添加以下三个类

d-flex justify-content-center align-items-center

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

<div class="row" style="height:200px;background-color:grey">
  <div class="col-md-10 d-flex align-items-center justify-content-center">
    <span>How to center this vertically/horizontally</span>
  </div>
  <div class="col-md-2 d-flex align-items-center justify-content-center">
    <span>This too</span>
  </div>
</div>

第一个类会使列显示属性变为flex

【讨论】：

【解决方案3】：

将这些作为类添加到您的跨度text-center 和align-middle。

这些类的文档可以在这里查看：

排版：https://v4-alpha.getbootstrap.com/utilities/typography/

垂直对齐：https://v4-alpha.getbootstrap.com/utilities/vertical-align/

如果这不起作用，或者，您可以在跨度周围添加 div，给它们一个类，并为这些类指定以下样式：http://jsfiddle.net/x1hphsvb/32/

.col-md-10{
  height: 200px;
}
.col-md-2{
  height: 200px;
}

.this-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.that-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="height:200px;background-color:grey">
   <div class="col-md-10">
      <div class="this-div">
      <span>How to center this vertically/horizontally</span>
      </div>
   </div>
   <div class="col-md-2">
      <div class="that-div">
      <span>This too</span>
      </div>
   </div>
</div>

【讨论】：

如果 OP 没有跨度中的文本，或者跨度具有其父级的完整高度，这将起作用。
@Abdel 我已经更新了我的答案，这应该允许 OP 应用允许他们水平和垂直对齐文本的样式。

【解决方案4】：

使用position:relative 和position:absolute 加上transform:translate()。

我把col-md改成了col-xs，这样你就可以在sn-p中看到效果了（因为sn-p很小）。

我还在两列中添加了height:100%，以便它们采用父级的高度，您可以看到span 水平和垂直居中。即使您调整浏览器大小，它也会保持对齐

.col-xs-10,
.col-xs-2 {
  position: relative;
}

.col-xs-10 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.col-xs-2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="height:200px;background-color:grey">
  <div class="col-xs-10" style="background-color:red;height:100%;">
    <span>How to center this vertically/horizontally</span>
  </div>
  <div class="col-xs-2" style="background-color:blue;height:100%;">
    <span>This too</span>
  </div>
</div>

【讨论】：