引导 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

这个问题的垂直中心方面是重复的： 引导 4 中的垂直对齐中心

页面高度和没有滚动方面的问题，"没有任何滚动......页面的正中间，然后在页面底部还有一个页脚"需要弹性框来填充高度。 h-100不起作用，因为它将页脚推过高：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类将包含在 Bootstrap 4.1 中，因此在 4.1 发布时不再需要额外的 flex-fill CSS。

---

相关问题：
引导 4 扩展的导航栏和内容填充高度 flexbox

Answer 2

试试这个：将<div class="cover-container text-center"更改为<div class="container-fluid text-center">，并将两端内容中心类添加到<div class="row h-100 align-items-center">

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