Html 垂直居中文本引导

我想将我的文本垂直居中放置在

div class=“col-md-6”

并且有相同的高度

例如：

---

如果知道高度，则如果有单行，则将行高度设置为等于div的高度

如果超过一行

HTML

---

检查我的代码片段，它将根据您的需要工作。。。

.content\u中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：250px；
高度：150像素；
边框：1px纯黑；
}

我想要什么

使用保证金上限：50%；对文本进行修改

.vertical{
利润率最高：50%；
}

引导示例
第3栏

我所拥有的
.v_对齐{
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
}

在文本元素上尝试以下css：

.className{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

---

定义自定义类并按如下方式使用：

。垂直对齐{
显示器：flex；
对齐项目：居中；
}

虚拟文本

这是引导程序4：

你好你好

在引导程序4中， 在父元素中使用类“对齐自中心”

<div class="align-self-center">
    hello hello
</div>

你好你好

基于Bootstrap 4（现在基于flex），您可以在Bootstrap

行上使用
对齐项目中心
实用程序来垂直居中该行的内容

例如：

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-fluid">
    </div>
    <div class="col-8">
      Text vertically centred!
    </div>
  </div>
</div>


文本垂直居中！

JSFiddle

我找到了关于
align items center
关键字的信息。
将class=“text center”放在你的文本中文本会自动换行吗？如果没有，您可以使用CSS
line height
属性，并将其设置为与您的固定高度相匹配。@this.girish将使文本水平居中…哎呀，在水平和垂直方向上混淆了，我的BAD如果文本只有一行，此链接可能会很好地工作，但是多行文本如何？（顶部边距将为50%，但底部的空白不会为50%@您找到了吗solution@Mri我真的不记得我当时是否这样做了。但你可以做的一件事是使用CSS的“对齐项”属性。现在大多数浏览器似乎都支持它，所以它应该可以做到代码看起来像你的精彩内容de>文档参考：父元素是关键区别。@Shneor我从一个代码片段切换到一个常规代码块，因为可运行的演示需要更多的样板文件。我曾考虑添加上述样板文件，但这会破坏本示例的简单性。如果您打算将两者水平对齐，这是正确的解决方案（对齐内容：居中）和垂直（对齐项目：居中），两者都具有设置的高度和显示：灵活选项。
.className{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

<div class="align-self-center">
    hello hello
</div>

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-fluid">
    </div>
    <div class="col-8">
      Text vertically centred!
    </div>
  </div>
</div>