我在 Bootstrap 4 中有以下设置：Bootply link
其中带有“供应商”文本的元素应该垂直居中，我有不同的行具有相同的代码，我希望它们居中。似乎没有任何解决方案适合我。
这里有人能发现我做错了什么并指出我正确的方向吗？
谢谢。
【问题讨论】：
标签： bootstrap-4 twitter-bootstrap-4
你可以像这样使用flex-xs-middle类..
Bootstrap 4 Alpha 5
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="circle-medium backgrounds"></div>
</div>
<div class="col-xs-6 flex-xs-middle">
<div class="name">Supplier</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="circle-medium backgrounds"></div>
</div>
<div class="col-xs-6 flex-xs-middle">
<div class="name">Supplier</div>
</div>
</div>
</div>
http://www.codeply.com/go/PNNaNCB4T5（使用启用了 Bootstrap 4 flexbox 的 CSS）
引导程序 4
Bootstrap 4.0.0 更新
现在 Bootstrap 4 默认为 flexbox，有许多不同的垂直对齐方法可以使用：auto-margins、flexbox utils，或 display utils 以及 vertical align utils。起初“垂直对齐工具”似乎很明显，但这些仅适用于内联和表格显示元素。以下是 Bootstrap 4 垂直居中选项。 记住，垂直对齐是相对于parent height。
1 - 使用自动边距的垂直居中：
垂直居中的另一种方法是使用my-auto。这将使元素在其容器中居中。例如，h-100 使行全高，my-auto 将使col-sm-12 列垂直居中。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto表示垂直y轴的边距，相当于：
margin-top: auto;
margin-bottom: auto;
2 - Flexbox 垂直居中：
由于 Bootstrap 4 .row 现在是 display:flex，您可以简单地在任何列上使用 align-self-center 将其垂直居中...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
或者，在整个.row 上使用align-items-center 将行中的所有col-* 垂直居中对齐...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
重要提示：direct parent of the element to be aligned must have a defined height!
3 - 使用显示工具的垂直居中：
Bootstrap 4 具有display utils，可用于display:table、display:table-cell、display:inline 等。这些可以与vertical alignment utils 一起使用以对齐内联、内联块或表格单元格元素。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
【讨论】：
使用.my-auto 类在页面上垂直居中放置一个主元素，在需要之前对每个元素应用全高；使用以下方法之一：
.h-100引导类height: 100vh;风格height: 100%;风格例子：
<body class="h-100">
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto"> <!-- Finally! -->
<div class="jumbotron">
...
</div>
</div>
</div>
</div>
</body>
【讨论】：