Bootstrap 4 居中

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

水平中心

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

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

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

 placeholderCopy<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:blockdisplay:flex mx-auto

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

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

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

可以居中:mx-auto

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