水平和垂直居中引导程序连续四列

Question

我试图将居中对齐并在容器内对齐两个引导程序列。列在不同的行中。

网格布局是

<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>

卡片只是用来勾勒出容器的轮廓。

我知道有很多关于垂直对齐的问题，我可能错过了包含我所需答案的问题。但是我不能接受的大多数是父母需要有一定的身高。
如果只有一行，则下面的命令就可以了，因为您可以将列居中在高度为100％的行中。但是，如果您有两行，那么效果就不太好了，因为每一列都位于其自己的行的中心，并且每一行都是窗口的高度。

<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移到容器上，但是可惜那似乎什么也没做。

因此，请帮助我，如何将这些齐平的东西一叠放在屏幕中间？

Answer 1

这是使用Bootstrap在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。这些行中的每一行都将扩展（具有相同的权重）以平等地填充顶部和底部。中间的每个内容行将具有其内容的高度。

最终结果是ITEM卡在屏幕上垂直和水平居中。由于它们位于单独的行中，因此您可以根据需要调整边距/边距（默认情况下，它们的卡最终垂直相邻。

引导程序中上述代码的示例屏幕截图

您可以使用一行+一列和一个内部flexbox来进行此操作，但是这样可以减少对单个卡相对于彼此的显示方式的控制。

编辑：d-flex使容器成为围绕其子行的flex容器，而flex-column使子项垂直而不是水平地渲染和拉伸。