水平和垂直居中引导程序连续四列 [英] Horizontally and vertically center bootstrap 4 columns in consecutive rows
问题描述
我试图简单地居中对齐并对齐容器内的两个引导程序列.列在不同的行中.
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
网格布局为
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
卡片只是用来勾勒出容器的轮廓.
the cards are just to outline the containers.
我知道关于垂直对齐有很多问题，我可能已经错过了包含我所需答案的问题.但是我要摆脱的大多数是父母需要有一些身高.
如果只有一行，那么下面的方法就很好了，因为您可以将列居中在高度为100％的行中.但是，如果您有两行，那么效果就不太好了，因为每一列都位于其自己的行的中心，并且每一行都是窗口的高度.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
我希望我可以将 justify-content-center-align-items-center 移到容器中，但是可惜的是它什么也没做.
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
所以，请帮助我，如何将这些齐平的东西一叠放在屏幕中间?
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
推荐答案
这是在Flexboxes中使用Bootstrap构建的一种好方法.
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
我们有两个缓冲区flex行，其中flex-grow-1.这些行中的每一行都将扩展(具有相同的权重)以平等地填充顶部和底部.中间的每个内容行都将具有其内容的高度.
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
最终结果是ITEM卡在屏幕上垂直和水平居中.由于它们位于单独的行中，因此您可以根据需要调整边距/边距(默认情况下，它们的卡垂直相邻放置.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
您可能会用一行+一列和一个内部flexbox来进行此操作，但这使您对单个卡相对于彼此的显示方式的控制较少.
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
d-flex使容器成为围绕其子行的flex容器，而flex-column使子级在垂直而非水平方向上渲染和拉伸.
d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
这篇关于水平和垂直居中引导程序连续四列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
