bootstrap-4 - Bootstrap 4 中心对齐全高无滚动

Question

我想澄清一下，这是一个基本页面，不会有任何滚动和最少的文本。

我一直在尝试使用 Bootstrap 4 将文本与页面的直接中间对齐，然后在页面底部也有一个页脚，也居中。

我目前有以下内容

<div class="cover-container text-center">
    <div class="row justify-content-center flex-column h-100">
        Test
    </div>
    Anything here adds a scrollbar
</div>

我曾尝试更改 h-100 并将类拆分为不同的 div 以查看是否会有所不同，但事实并非如此。

我也尝试过类似的事情(除了将滚动条添加到页面并查看我需要向下滚动的页脚之外，它还可以工作):

<div class="cover-container text-center">
    <div class="row h-100 align-items-center">
        <div class="align-items-center">
            <main>
               <h1>Hi!</h1>
            </main>
        </div>
    </div>
    <footer>
        Footer
    </footer>
</div>

Answer 1

这个问题的垂直中心方面是重复的:Vertical Align Center in Bootstrap 4

问题的页面高度和无滚动方面，“无任何滚动......直接在页面中间，然后在页面底部也有一个页脚”需要 flexbox 填充高度 . h-100将不起作用，因为它将页脚推到 height:100% 之上，因此需要滚动才能看到页脚(或隐藏页脚)。

.cover-container {
    height: 100vh;
}

.flex-fill {
    flex: 1 1 auto;
}

HTML

<div class="container-fluid cover-container text-center d-flex flex-column">
    <div class="row bg-light align-items-center justify-content-center flex-fill">
        <div class="col-12">
            <main>
               <h1>Hi!</h1>
            </main>
        </div>
    </div>
    <footer>
        Footer
    </footer>
</div>

https://www.codeply.com/go/CIMvZxkT4O

注意:flex-fill类(class)将是 included in Bootstrap 4.1所以额外的 flex-fill 4.1 发布后将不再需要 CSS。

相关问题:
Bootstrap 4 expanded navbar and content fill height flexbox