Bootstrap 4 Bootstrap 4 Flexbox-将多列与对齐项目中心对齐

我有3列，我正试图垂直于视口居中。列需要全宽-无内联。我希望它们像在代码层中一样垂直堆叠，只需使用“对齐项目中心”，使所有三个项目垂直于视口中心

检查

弹性项目1
弹性项目1
弹性项目1

---

试试这个。您已经在内部项上使用了flex列，但它必须在flex上，并且在容器上缺少d-flex类。查看此项了解更好的想法：

弹性项目1
弹性项目1
弹性项目1

这正是我想要的。你就是那个人！非常感谢。

<div class="container-fluid" style="border: 3px solid red;">
<div class="row min-vh-100" style="border: 4px solid blue;">
    <div class="col" style="border: 3px solid yellow;">
        <div class="flex-column align-items-center p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
        <div class="flex-column p-2" style="border: 4px solid orange;">Flex item 1</div>
    </div>
</div>

<div class="container-fluid" style="border: 3px solid red;">
    <div class="row min-vh-100" style="border: 4px solid blue;">
        <div class="col d-flex flex-column justify-content-center" style="border: 3px solid yellow;">
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
            <div class="p-2" style="border: 4px solid orange;">Flex item 1</div>
        </div>
    </div>
</div>