Bootstrap h-100和垂直居中内容

Question

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

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

不知道这是不是有帮助，但这是有问题的div的超文本标记语言：

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

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

有什么建议吗？谢谢!

Answer 1

你试过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>