Question

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

<html>

<head>
</head>

<body>
    <div class="overlay-cont">
        <embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <div class="overlay">
            <img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
        </div>
    </div>

    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content"></div>
    </div>
</body>

</html>

Answer 1

要使容器垂直和水平居中，需要使它的父容器成为一个以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/

Answer 2

首先确保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>

Answer 3

尝试一下

 <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>

如何使用Bootstrap 4在体内垂直居中放置内容

3 个答案: