bootstrap-4 – Bootstrap 4中的垂直对齐

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)

Bootstrap 4

Bootstrap 4.0.0的更新

现在Bootstrap 4默认是flexbox,有许多不同的垂直对齐方法,使用：auto-margins,flexbox utils或display utils以及vertical align 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现在显示：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 – 垂直中心使用Display Utils：

Bootstrap 4具有可用于显示的display utils：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>

Vertical Center Using Display Utils Demo