我有一個頁面，其中只有表單存在，我希望表單放在屏幕的中心。

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-center水平對齊表單，但我不知道如何垂直對齊。我試過用align-items-center和align-self-center，但是都不管用。

我錯過了什么？

演示

引導(dǎo)數(shù)據(jù)庫5(2021年更新)

Bootstrap 5仍然基于flexbox，因此垂直居中的工作方式與Bootstrap 4相同。例如，align-items-center(flex-direction:row)和justify-content-center(flex-direction:column)可以用在flexbox父級(row或d-flex)上。

引導(dǎo)程序5中的居中示例

垂直居中(不要忘記父對象必須有一個定義的高度！):

my-在flex內(nèi)部自動居中(。d-flex)元素 my-auto可用于居中列(。col-)行內(nèi) 對齊-項目-在行內(nèi)居中對齊列(col-*) 水平居中:

文本-中心到中心顯示:行內(nèi)元素& amp列內(nèi)容 MX-自動用于在柔性元件內(nèi)居中 mx-auto可用于使列居中(。col-)行內(nèi) 對齊-內(nèi)容-中心到行內(nèi)中心列(col-*) bootstrap 4.3+(2019年更新)

不需要額外的CSS。Bootstrap中已經(jīng)包含的內(nèi)容將會起作用。確保表單的容器是全高的。Bootstrap 4現(xiàn)在有一個100%高度的h-100類...

垂直居中:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

項目居中的容器高度應(yīng)為100% (或者相對于居中項目的任何期望高度)

注意:當(dāng)在任何元素上使用height:100%(百分比高度)時，該元素接受其容器的高度。在現(xiàn)代瀏覽器中vh單位高度:100vh可以用來代替%來得到想要的高度。

因此，可以設(shè)置html，body {height: 100%}，或者在container上使用新的min-vh-100類，而不是h-100。

水平居中:

文本-中心到中心顯示:行內(nèi)元素& amp列內(nèi)容 MX-自動用于在柔性元件內(nèi)居中 offset-*或mx-auto可用于使列居中(。列-) 對齊-內(nèi)容-中心到行內(nèi)中心列(col-*) 引導(dǎo)中垂直居中對齊 Bootstrap 4全屏居中形式 自舉4中心輸入組 Bootstrap 4水平+垂直居中全屏

這個對我來說有用:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

flexbox可以幫助你。此處信息

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Bootstrap具有文本居中功能，可將文本居中。例如

<div class="container text-center">

您可以更改以下內(nèi)容

<div class="row justify-content-center align-items-center">

到下面

<div class="row text-center">

你需要一些東西來集中你的形式。但是因為你沒有為你的html和body指定高度，它將只包裝內(nèi)容——而不是視窗。換句話說，沒有空間來放置物品。

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

沒有一個對我有效。但是他的那個有。

自從自舉4。行類現(xiàn)在是display:flex。您可以簡單地在任何列上使用新的align-self-center flexbox實用程序來垂直居中它:

<div class="row">
   <div class="col-6 align-self-center">
      <div class="card card-block">
      Center
      </div>
   </div>
   <div class="col-6">
      <div class="card card-inverse card-danger">
      Taller
      </div>
   </div>
</div>

我是從https://medium . com/wd stack/bootstrap-4-vertical-center-1211448 a2 eff了解到的

使用v4或v5時，嘗試下面給出的代碼。

<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
  Vertically and Horizontally Aligned :)
</div>

...運籌學(xué)...如果使用v5，您可以使用這些類。

<div class="position-absolute top-50 start-50 translate-middle">
  Vertically and Horizontally Aligned :)
</div>

這樣做，就這樣了:)

這是在IE 11與Bootstrap 4.3一起工作。而在我的情況下，其他答案在IE11中不起作用。

<div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

自舉方式

超文本標記語言

<div class="row top-row">
        <div class="col center-text">
            <H1>Center Text Horizantally and vertically</H1>
        </div>
</div>

自定義CSS

.top-row{
        height: 300px; //It's important to set height 
    }
  .center-text{
       display: flex;
       align-items: center;
       justify-content: center;
    }

<link  rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

我瀏覽了很多關(guān)于在頁面中心放置表格的帖子，但是沒有一個有效。下面的代碼來自使用bootstrap 4.1的react組件。高度應(yīng)為100vh，而不是100%

<div className="container">
      <div className="d-flex justify-content-center align-items-center" style={height}>
        <form>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Email" type="email"/>
          </div>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Password" type="password"/>
          </div>
          <div className="form-group">
            <button className="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
    </div>

其中，樣式中的高度為:

常數(shù)高度= { 高度:“100英尺高” }

從bootstrap v5.0開始:

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>

我在這里結(jié)束，因為我有一個關(guān)于Bootstrap 4網(wǎng)格系統(tǒng)和Angular *ngFor循環(huán)的問題。我通過對實現(xiàn)ngFor的div應(yīng)用col justify-content-center類修復(fù)了這個問題:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

這給出了結(jié)果:

我需要顯示容器內(nèi)流體垂直中心的形式，所以我開發(fā)了自己的代碼。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
       .container-fluid
       {
            display: table-cell;
            height: 100vh;
            width: 100vw !important;
            vertical-align: middle;
            border:1px solid black;
       }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-8 offset-2">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">
                        <h2>Login</h2>
                    </div>

                    <div class="card-body">
                        <form action="">
                            <div class="form-group row">
                                <label for="txtemail" class="col-form-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" name="txtemail" id="txtemail" class="form-control" required />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtpassword" class="col-form-label col-sm-2">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" name="txtpassword" id="txtpassword" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-block">Login</button>
                                <button class="btn btn-warning btn-block">clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</body>

</html>

在CSS中使用以下代碼:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

從文檔中(bootsrap 4):

https://get bootstrap . com/docs/4.0/utilities/flex/# justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

自舉5

body {
  display: flex;
  align-items: center;
}

https://getbootstrap.com/docs/5.1/examples/sign-in/

Bootstrap的m-auto是你的朋友！

如果您想在某個父容器中暫停您的內(nèi)容，那么您只需要h-100、d-flex和m-auto:

<div class="h-100 d-flex">
  <div class="m-auto">
    Content
  </div>
</div>

外部容器將膨脹到它本身所在的容器的大小，內(nèi)部容器將在它的每一側(cè)設(shè)置自動邊距，使它在父容器中居中。

div > div { border: 1px solid red; }
div { border: 1px solid blue; }
body { border: 1px dashed orange; }

<link rel="stylesheet" >

<body class="m-2" style="width: 600px; height: 150px;">
  <div class="h-100 d-flex">
    <div class="m-auto">
      This content is centered<br>
      both vertically and horizontally<br>
      in its container
    </div>
  </div>
</body>