221

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

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

我错过了什么？

演示

4

17 回答 17

438

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).

Centering examples in Bootstrap 5

Vertical center (don't forget the parent must have a defined height!):

  • my-auto for centering inside flex (.d-flex) elements
  • my-auto can be used to center columns (.col-) inside row
  • align-items-center to center columns (col-*) inside row

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • mx-auto can be used to center columns (.col-) inside row
  • justify-content-center to center columns (col-*) inside row

Bootstrap 4.3+ (Update 2019)

There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...

Vertical center:

<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

the height of the container with the item(s) to center should be 100% (or whatever the desired height is relative to the centered item)

Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.

Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.

Horizontal center:

  • text-center to center display:inline elements & column content
  • mx-auto for centering inside flex elements
  • offset-* or mx-auto can be used to center columns (.col-)
  • justify-content-center to center columns (col-*) inside row

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

于 2017-06-28T11:40:03.727 回答
29

这对我有用：

<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>
于 2017-09-19T11:00:37.230 回答
19

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>
于 2018-07-18T15:10:20.887 回答
15

Bootstrap 具有 text-center 以使文本居中。例如

<div class="container text-center">

您更改以下内容

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

到以下

<div class="row text-center">
于 2018-09-29T17:01:37.647 回答
12

你需要一些东西来让你的表格居中。但是因为你没有为你的 html 和 body 指定高度，它只会包装内容——而不是视口。换句话说，没有空间可以将项目居中。

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}
于 2017-02-22T10:53:07.190 回答
11

没有一个对我有用。但他的一个做到了。

由于 Bootstrap 4 .row 类现在是 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/wdstack/bootstrap-4-vertical-center-1211448a2eff了解到的

于 2019-05-10T12:35:55.023 回答
2

这适用于带有 Bootstrap 4.3的IE 11。在我的情况下，其他答案在 IE11 中不起作用。

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>
于 2019-11-07T17:52:40.303 回答
2 

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

于 2020-01-22T20:35:47.977 回答
1

从 bootstrap v5.0 开始：

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>
于 2021-10-08T21:30:14.313 回答
1

我需要在容器流体内垂直居中显示表格，所以我为此开发了自己的代码。

<!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>
于 2021-02-09T07:44:02.773 回答
1

浏览了很多关于将表单置于页面中心的帖子，但没有一个有效。下面的代码来自使用 bootstrap 4.1 的反应组件。高度应该是 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>

样式高度为：

常量高度 = { 高度：'100vh' }

于 2020-12-04T10:02:40.233 回答
0

在 CSS 中使用此代码： 

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}
于 2020-04-14T14:08:26.623 回答
0

引导程序 5

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

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

于 2021-10-09T07:30:12.880 回答
0

引导方式

HTML

 <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;
    }
于 2021-12-22T10:40:11.677 回答
0

我来到这里是因为我遇到了 Bootstrap 4 网格系统和 Angular *ngFor 循环的问题。我通过将 col justify-content-center 类应用于实现 ngFor 的 div 来修复它：

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

结果是： 在此处输入图像描述

于 2020-06-24T08:06:53.950 回答
0

从文档（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
于 2020-07-19T13:58:43.843 回答
0

v4在使用or时尝试下面给出的代码v5。

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

...或者...如果使用 . 您可以使用这些类v5。

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

这样做，就是这样:)

于 2021-11-09T02:16:13.957 回答