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