学习Bootstrap 4：为何填充视口高度才使Flexbox生效？

嘿，我来帮你搞明白这个问题～其实核心原因和Flexbox的工作机制直接相关：Flex容器必须有明确的高度（或最小高度），才能让子元素在垂直方向上实现真正的居中。

你写的.fill-viewport { min-height: 100vh; }这个类，作用是让容器的最小高度等于整个浏览器视口的高度（100vh就是当前浏览器可视区域的高度）。如果没有这个类，你的Flex容器高度只会被里面的文本内容撑开——高度和文本本身差不多，这时候哪怕你用了Bootstrap的Flex居中类（比如justify-content-center、align-items-center），垂直方向的居中效果根本看不出来，因为容器本身就没有足够的高度空间让文本“居中”。

给你补全了完整的可运行代码示例，你可以对照着看：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap Flex 居中示例</title>
    <!-- 引入Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .fill-viewport {
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <!-- 用fill-viewport让容器占满视口，搭配Bootstrap的Flex类实现双向居中 -->
    <div class="fill-viewport d-flex justify-content-center align-items-center">
        <p>这段文本现在可以在页面垂直水平居中啦！</p>
    </div>

    <!-- 引入Bootstrap依赖的JS（如果不需要交互组件可以省略） -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

再提炼下关键要点：

• Flex的垂直居中效果完全依赖容器的高度，没有足够高度的话，align-items-center只会在容器自身的小高度里“居中”，视觉上和没居中没区别。
• min-height:100vh让容器撑满整个浏览器视口，给Flex布局提供了足够的垂直空间，这时候居中效果才会显现出来。

内容的提问来源于stack exchange，提问作者Gabriel Galán