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

试试这个： 将<div class="cover-container text-center"更改为<div class="container-fluid text-center">并将 justify-content-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>

Answer 2

此问题的垂直中心方面是重复的：Vertical Align Center in Bootstrap 4

问题的页面高度和无滚动方面，“没有任何滚动...直接在页面中间，然后页面底部也有一个页脚”需要 flexbox填充高度。 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类将为included in Bootstrap 4.1，因此4.1发布后将不再需要额外的flex-fill CSS。

<小时/> 相关问题：
Bootstrap 4 expanded navbar and content fill height flexbox

Bootstrap 4中心对齐全高无滚动

2 个答案: