Bootstrap 4 中的垂直对齐

Question

我在 Bootstrap 4 中有以下设置：Bootply link

其中包含 "Supplier" 文本的元素应该垂直居中，我有不同的行具有相同的代码，我希望它们居中。似乎没有任何解决方案适合我。

这里有人能找出我做错了什么并指出正确的方向吗？

谢谢。

Answer 1

~~你可以像这样使用flex-xs-middleclass..~~

Bootstrap 4 阿尔法 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 enabled CSS）

Bootstrap 4

更新 Bootstrap 4.0.0

现在 Bootstrap 4 默认是 flexbox 有许多不同的垂直对齐方法：auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious but these only work with inline and table display elements. Below are the Bootstrap 4 vertical centering options. Remember, vertical alignment is relative to 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 that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils 对齐行内、行内块或 table 单元格元素。

<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>

Vertical Center Using Display Utils Demo

Answer 2

使用 .my-auto class 使页面上的 主元素 垂直居中，在需要之前对每个元素应用全高；使用以下之一：

.h-100 Bootstrap class
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>

Bootstrap 4 中的垂直对齐

Vertical alignment in Bootstrap 4

bootstrap-4

twitter-bootstrap-4