自举中的垂直对齐中心4 [英] Vertical Align Center in Bootstrap 4
问题描述
我试图使用Bootstrap 4将我的容器居中放置在页面中间。到目前为止，我一直没有成功。任何帮助将不胜感激。
我在
由于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 =卡片反卡危险>
高价
< / 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 =卡片反卡危险>
高价
< / div>
< / div>
< / div>
3 - 使用Display Utils的垂直中心：
Bootstrap 4有 display utils 可用于 display：table ， display：table-cell ， display：inline 等。这些可以与来对齐内嵌，内嵌块或表格单元元素。
< div class =row h-50>
< div class =col-sm-12 h-100 d-table>
< div class =card card-block d-table-cell align-middle>
我垂直居中
< / div>
< / div>
< / div> b
$ b noreferrer>垂直中心使用Display Utils 演示
更多示例
垂直中心图像位于< div>
垂直中心.row in .container
垂直中心和底部在< div>
家长中的垂直中心儿童
垂直中心全屏jumbotron
重要！ 我提到身高？
Reme mber垂直居中是相对于父元素的高度。如果你想集中整个页面，在大多数情况下，这应该是你的CSS ...
body，html {
身高：100％;
}
如果您想要将父元素中的子元素居中。家长必须具有定义的身高。
另请参阅：
自举4中的垂直对齐
Bootstrap 4.中心垂直和水平对齐
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...
Edit - [ANSWER]
Adding the following to the top of my CSS fixed the problem:
html, body {
height:100%;
}
body {
display:flex;
align-items:center;
}
Also, in Bootstrap 4:
Adding the classes d-flex align-items-center h-100 to the parent also solves the problem and is a more Bootstrappy approach. Note this does the same thing as the aforementioned approach.
Solved thanks to @Pete, @ZimSystems as well as others
解决方案 Important! Vertical center is relative to the height of the parent
If the parent of the element your trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering in Bootstrap 4...
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
Option 2 align-items-center on flexbox parent (.row is 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>
https://www.codeply.com/go/BumdFnmLuk
Option 3 justify-content-center on flexbox parent (.card is 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>
https://www.codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...
<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>
or, use align-items-center on the entire .row to vertically center align all col-* in the row...
<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>
Vertical Center Different Height Columns Demo
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<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>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap 4. Center Vertical and Horizontal Alignment
这篇关于自举中的垂直对齐中心4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
