Question

我有一个只存在表单的页面，我希望将表单放在屏幕的中央。

<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，但它不起作用。

我错过了什么？

DEMO

Answer 1

更新2019 - Bootstrap 4.3.1

额外的CSS 不需要。 Bootstrap中已包含的内容将起作用。确保表单的容器全高。 Bootstrap 4现在有一个h-100类，高度为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://www.codeply.com/go/raCutAGHre

具有项目中心的容器的高度应为100％ （或任何所需高度相对于居中项目）

注意：在任何元素上使用height:100%（百分比高度）时，元素takes in the height of it's container。在现代浏览器中，可以使用单位height:100vh;代替%来获得所需的高度。

因此，您可以设置html，body {height：100％}，或在容器上使用新的min-vh-100类而不是h-100。

横向中心：

text-center以display:inline元素为中心＆amp;专栏内容
mx-auto用于居中于flex元素
offset-*或mx-auto可用于中心列（.col-）
justify-content-center到中心列（col-*）row

Vertical Align Center in Bootstrap 4
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen

Answer 2

您需要将表单集中在一起。但是因为你没有为你的html和body指定高度，它只会包装内容 - 而不是视口。换句话说，没有空间将项目置于中心位置。

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

Answer 3

这项工作对我来说：

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

Answer 4

flexbox可以为您提供帮助。 info here

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

Answer 5

遍历了很多帖子，以使表单居中显示在页面中，但没有一个起作用。下面的代码来自使用bootstrap 4.1的react组件。高度应为100vh，而不是100％

<span ng-show="pendingRequests > 0">
    <img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" style="height:20px;"/>
</span>

样式中的高度为：

常量高度= { 高度：“ 100vh” }

Answer 6

没有人为我工作。但是他的一个做到了。

由于现在显示了Bootstrap 4 .row类：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/wdstack/bootstrap-4-vertical-center-1211448a2eff那里了解了

Answer 7

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

Answer 8

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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>

Answer 9

在CSS中使用此代码：

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

Answer 10

我到这里结束是因为我在遇到Bootstrap 4网格系统和Angular * ngFor循环时遇到了问题。我通过对实现ngFor的div应用col justify-content-center类来解决此问题：

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

给出结果：

Answer 11

从文档中（bootsrap 4）：

https://getbootstrap.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

Answer 12

我需要在容器流体内垂直居中显示形式，因此我为此开发了自己的代码。

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

Answer 13

Bootstrap具有以文本为中心的文本居中位置。例如

<div class="container text-center">

您更改以下内容

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

到以下

<div class="row text-center">

Bootstrap 4中心垂直和水平对齐

13 个答案: