Bootstrap 4.4.1用align-self-center实现flex垂直居中无效如何解决

核心问题分析 #

无法实现垂直居中的根本原因是 你当前使用的.container容器没有占满整个浏览器视口高度。flex布局的垂直对齐属性是基于父元素的可用高度生效的，默认状态下.container的高度仅等于内部内容的总高度，没有多余的垂直空间供内容块做居中对齐。

修复方案 #

直接使用Bootstrap 4自带的工具类即可实现需求，无需额外编写自定义CSS，修改点如下：

1. 给最外层.container添加d-flex flex-column vh-100三个类：
   • vh-100让容器高度等于100%视口高度
   • d-flex flex-column将容器设置为纵向排列的flex容器，内部子元素按垂直方向排布
2. 给承载主体内容的.row添加flex-grow-1 d-flex align-items-center三个类：
   • flex-grow-1让该行自动占满导航栏之外的所有剩余垂直空间
   • d-flex align-items-center让行内部的内容实现垂直居中
3. 可简化navbar内部结构，直接给navbar添加justify-content-end即可实现按钮右对齐，不需要额外套col-md-12层。

修改后的完整代码如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container d-flex flex-column vh-100">
    <nav class="navbar navbar-light bg-light justify-content-end">
        <button class="btn btn-warning btn-large">Large</button>
    </nav>

    <div class="row flex-grow-1 d-flex align-items-center">
        <div class="col-12 mx-auto">
            <div class="jumbotron text-center">
                Some text
            </div>
        </div>
    </div>
</div>

补充说明：flex布局的对齐属性生效的前提是父元素有明确的对应方向尺寸，纵向垂直对齐需要父元素有明确高度，横向水平对齐需要父元素有明确宽度，这是flex布局的核心规则之一。

内容的提问来源于stack exchange，提问作者bluedot