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
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:block
或 display: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(y 轴)中的垂直居中,请参阅以下文档: Bootstrap 4 Vertical Align