Bootstrap 4 居中

如何将列中的元素，列或内容居中，在 Bootstrap 4 中的工作方式不同。

水平中心

• text-center 仍然用于 display:inline 元素
• mx-auto 取代 center-block 到中心 display:block 元素
• offset-* 或 mx-auto 可用于居中网格列

mx-auto（自动 x 轴边距）将定义具有定义宽度的 display:block 或 display:flex 元素 （%，vw，px 等）。默认情况下， Flexbox 在网格列上使用，因此还有各种 flexbox 居中方法。

中心文本或内联元素： text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

中心 display:block 或 display:flex： mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

使用偏移的中心列： offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

列也可以居中：mx-auto

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

演示 Bootstrap 4 水平居中

垂直中心

对于 Bootstrap 4（y 轴）中的垂直居中，请参阅以下文档： Bootstrap 4 Vertical Align