Bootstrap 4中的垂直对齐中心

Bootstrap 4中的垂直对齐中心

重要！ 垂直中心相对于父级的高度

如果您要居中的元素的父级没有定义的 高度，则所有垂直居中解决方案都将无法使用！

现在，进入Bootstrap 4的垂直居中…

您可以使用新的flexbox和size实用程序制作

container

全高和

display: flex

。这些选项不需要额外的CSS（容器的高度（即：html，body）必须为100％）。

align-self-centerflexbox

子项的选项1

<div >    <div >     I'm vertically centered    </div></div>

align-items-centerflexbox父项上的选项2（.row是display:flex; flex-direction:row）<div >    <div >        <div > <div >     I'm vertically centered </div>        </div>    </div></div>

justify-content-centerflexbox父项上的选项3（.cardis display:flex;flex-direction:column）<div >    <div >        <div > <div >     <div>         ...card content...     </div> </div>        </div>    </div></div>

有关Bootstrap 4垂直居中的更多信息

现在，Bootstrap 4提供了flexbox和其他实用程序，有很多方法可以进行垂直对齐。http://www.preply.com/go/WG15ZWC4lf

1-使用自动边距的垂直中心：

垂直居中的另一种方法是使用my-auto。这将使元素在容器内居中。例如，h-100使行全高，并使列my-auto垂直居中col-sm-12。

<div >    <div >        <div >Card</div>    </div></div>

my-auto 表示垂直y轴上的边距，它等效于：

margin-top: auto;margin-bottom: auto;

2-带Flexbox的垂直中心：

垂直中心网格列

由于Bootstrap 4 .row现在display:flex就可以align-self-center在任何列上使用以使其垂直居中…

       <div ><div >     <div >      Center     </div></div><div >     <div >         Taller     </div>          </div>    </div>

或者，

align-items-center

整体

.row

上使所有

col-*

行垂直居中对齐…

       <div ><div >     <div >      Center     </div></div><div >     <div >         Taller     </div>          </div>    </div>

3-使用显示实用程序的垂直居中：

自举4具有显示utils的，可以被用于display:table，display:table-cell，display:inline等。这些可与所使用的垂直取向utils的要对齐的内联，内联块或表格单元格的元件。

<div >    <div >        <div > I am centered vertically        </div>    </div></div>

重要！ 我有提到身高吗？

请记住，垂直居中是相对于父元素的高度的。如果您想在整个页面上居中，大多数情况下，这应该是您的CSS …

body,html {  height: 100%;}

或在父/容器上使用min-height: 100vh（min-vh-100在Bootstrap 4.1+中）。如果要将子元素居中放置在父元素内部。父级必须具有定义的身高。