如何使用引导程序 4 在正文中垂直居中内容答案

【问题标题】：How to vertically center content in body using bootstrap 4如何使用引导程序 4 在正文中垂直居中内容
【发布时间】：2019-03-25 09:46:23
【问题描述】：

我正在尝试在屏幕中间水平和垂直对齐容器流体容器类。我确实尝试了许多应该与引导程序一起使用的类，但它们没有。非常感谢您的帮助！

<body>
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        </div>
        <div class="col-10 col-md-6 py-5">
            <form id="subscribeForLaunch" class="input-group">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div>  
    </div>
</div>

【问题讨论】：

How to center align vertically the container in bootstrap的可能重复

标签： html css alignment center vertical-alignment

【解决方案1】：

首先确保 body/html/ 容器占满高度（可以使用 h-100 类），然后将 align-self-center 添加到要居中的内容：

body,html {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100 justify-content-center">
    <div class="row justify-content-center align-middle h-100">
        <div class="col-10 text-center align-self-center">
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
        
          <form id="subscribeForLaunch" class="form-inline justify-content-center">
              <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
              <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
          </form>
       </div>
    </div>
</div>

【讨论】：

也试过这个。现在我确实尝试了 jsfiddle，它似乎在那里工作，但不在我的网站上。可能是什么问题？
你复制粘贴了html吗？它对您的原始版本进行了一些其他修改，例如我将您的表格放在第一列（col-10）下，因为我认为拥有两个 col-10 列没有意义
是的，我复制粘贴了
转到开发工具并确保 .row 占据页面的整个高度
.row, .conainer-fluid,body{ height:100% !important;这就是我添加到我的样式表中的内容，仍然是一样的

【解决方案2】：

试试这个

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
 
<div class="container align-items-center justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;"> Submit! </button>
            </form>
        </div> 
    </div>
</div>

或者这个

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
       
<div class="d-flex justify-content-center">
    <div class="row justify-content-center">
        <div class="col-10 text-center" >
            <h1 style="font-size:40pt;">Site in constructie</h1>
            <p>Ceva fain este in constructie!<br>
                Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>

            <form id="subscribeForLaunch" class="input-group container pr-5">
                <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                <button class="btn btn-info pl-1" onclick="subscribeRelease(); return false;">Submit!</button>
            </form>
        </div> 
    </div>
</div>

【讨论】：

两个都复制了，还是不行。 :( 由于对齐内容中心，它变成水平居中，但仅此而已。它停留在页面顶部。

【解决方案3】：

要使容器垂直和水平居中，您需要将其父容器设为以 align-items 和 justify-content 属性为中心的 flexbox 容器。在您的代码中，您可以为容器提供一个高度为 100% 的直接父 div，以便它占用主体的高度。

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>

<body>
<div class="h-100 d-flex  align-items-center justify-content-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-10 text-center" >
                    <h1 style="font-size:40pt;">Site in constructie</h1>
                    <p>Ceva fain este in constructie!<br>
                        Daca vrei sa fi intre primii care afla despre lansare<br> atunci introdu emailul tau si aboneaza-te!</p>
                </div>
                <div class="col-10 col-md-6 py-5">
                    <form id="subscribeForLaunch" class="input-group">
                        <input type="email" class="form-control email" style="background:rgba(255,255,255,0.8);" required="required" placeholder="Email" />
                        <button class="btn btn-info" onclick="subscribeRelease(); return false;">Submit!</button>
                    </form>
                </div>  
            </div>
        </div>
  </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

您可以参考： https://dev.to/c0depanda/flexing-with-css-flexbox-1a2l https://getbootstrap.com/docs/4.0/utilities/flex/

【讨论】：

我刚刚按照您的建议进行了操作，但仍然无法正常工作。 :(
请看一下修改后的代码。如果它仍然无法正常工作，请确保您以正确的顺序链接了引导 css/js 和 jquery 文件。如果仍然无法正常工作，请发布整个代码（头部、脚本等）