Bootstrap h-100 和垂直居中的内容

问题描述

我有一个 div，它是一个 Bootstrap col 并设置为 h-100。此 div 中的内容当前与顶部对齐。如果内容大于视口高度，则内容滚动。

如果此 div 中的内容小于视口高度，我希望它垂直居中。

不确定这是否有帮助，但这里是有问题的 div 的 HTML：

<div class="col-md-6 col-12 h-md-100 p-3 overflow-md-auto">

h-md-100 是一个自定义类，仅当视口宽度为 h-100 (768px) 或更大时才应用 md 样式。

有什么建议吗？谢谢！

解决方法

你试过align-self-center吗？这将使内容在列的中心垂直居中

<div class="col-md-6 col-12 d-flex flex-column align-self-center ">
    <div class="row">
        <div class="col">Content 1</div>
    </div>
    <div class="row">
        <div class="col">Content 2</div>
    </div>
    
</div>