重要! 垂直中心相对于父级的高度
如果您要居中的元素的父级没有定义的 高度,则所有垂直居中解决方案都将无法使用!
现在,进入Bootstrap 4的垂直居中…
您可以使用新的flex@R_31_2419@和size实用程序制作container
全高和display: flex
。这些选项不需要额外的CSS(容器的高度(即:html,body)必须为100%)。
align-self-centerflex@R_31_2419@
子项的选项1
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
align-items-centerflex@R_31_2419@父项上的选项2(.row是display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
justify-content-centerflex@R_31_2419@父项上的选项3(.cardis display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
有关Bootstrap 4垂直居中的更多信息
现在,Bootstrap @L_502_0@/go/WG15ZWC4lf
1-使用自动边距的垂直中心:
垂直居中的另一种方法是使用my-auto。这将使元素在容器内居中。例如,h-100使行全高,并使列my-auto垂直居中col-sm-12。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
my-auto 表示垂直y轴上的边距,它等效于:
margin-top: auto;
margin-bottom: auto;
2-带Flex@R_31_2419@的垂直中心:
垂直中心网格列
由于Bootstrap 4 .row现在display:flex就可以align-self-center在任何列上使用以使其垂直居中…
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
或者,align-items-center
整体.row
上使所有col-*
行垂直居中对齐…
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
3-使用显示实用程序的垂直居中:
自举4具有显示utils的,可以被用于display:table,display:table-cell,display:inline等。这些可与所使用的垂直取向utils的要对齐的内联,内联块或表格单元格的元件。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
重要! 我有提到身高吗?
请记住,垂直居中是相对于父元素的高度的。如果您想在整个页面上居中,大多数情况下,这应该是您的CSS …
body,html {
height: 100%;
}
或在父/容器上使用min-height: 100vh(min-vh-100在Bootstrap 4.1+中)。如果要将子元素居中放置在父元素内部。父级必须具有定义的身高。