Question

我已经回答了关于同一主题的多个堆栈溢出问题，但是我根本无法解决这个问题。我几乎尝试了以下问题中提到的所有解决方案，但似乎没有一种适合我。

Bootstrap 4 Center Vertical and Horizontal Alignment

这是我的代码的样子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body {
            height: 100%;
        }

        .col {
            border: 1px solid red;
        }

        .row {
            height: 200px;
            border: 1px solid blue;
        }
    </style>

</head>

<body>

<div class="container h-100 align-items-center">
    <div class="jumbotron my-auto">
        <div class="row">
            <div class="col align-self-end">
                col1
            </div>
            <div class="col align-self-start">
                col2
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col">
                col1
            </div>
            <div class="col">
                col2
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

所以任何人都可以帮助我在这里我所缺少的东西。我一直在努力从最近的2天开始完成这项工作，但是没有成功。

随附的是我页面外观的屏幕截图。

我知道我可以使用position属性将div放置在页面的中央，但我只是想知道是否可以仅通过Bootstrap来完成而不添加任何自定义CSS。

Answer 1

一种解决方案是声明container占据100vh（视口高度的100％），然后可以向其添加d-flex类，并将{{1}居中}，使用jumbotron。

align-self-center

Answer 2

编辑：请检查bootrap 4文档，关于此文档，他们明确指出： “ 请注意，垂直对齐仅影响内联，内联块，内联表和表单元格元素。”-https://getbootstrap.com/docs/4.0/utilities/vertical-align/

如果我是你。对于Div对齐，我只需添加： .jumbotron { 利润率最高：20％： }

  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        body {
            height: 100%;
        }

        .col {
            border: 1px solid red;
        }

        .row {
            height: 200px;
            border: 1px solid blue;
        }
        .jumbotron {
            margin-top: 20%:
        }
    </style>

</head>

<body>

<div class="container h-100 align-items-center">
    <div class="jumbotron my-auto">
        <div class="row">
            <div class="col align-self-center">
                col1
            </div>
            <div class="col align-self-center">
                col2
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col">
                col1
            </div>
            <div class="col">
                col2
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

似乎无法使容器div的主体内部与Bootstrap4垂直居中对齐

2 个答案: