Bootstrap h-100 和垂直居中内容答案

【问题标题】：Bootstrap h-100 and vertically centering contentBootstrap h-100 和垂直居中内容
【发布时间】：2023-03-26 15:03:01
【问题描述】：

我有一个div，它是一个引导程序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 是一个自定义类，仅当视口宽度为 md (768px) 或更大时才应用 h-100 样式。

有什么建议吗？谢谢！

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 responsive-design vertical-alignment

【解决方案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>

【讨论】：