Bootstrap 4中心垂直和水平对齐


162

我有一个页面,其中仅存在表单,并且我希望将表单放置在屏幕的中央。

<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-centeralign-self-center,但是它不起作用。

我想念什么?

演示

Answers:


322

更新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%百分比高度)时,该元素将采用其容器的高度。在现代浏览器height:100vh;中,可以使用vh单位代替%获得所需的高度。

因此,您可以设置html,正文{height:100%}或min-vh-100在容器上使用新类,而不是h-100


水平中心:

  • text-centerdisplay:inline元素和列内容为中心
  • mx-auto 用于在flex元素内部居中
  • offset-*mx-auto可用于将列居中.col-
  • justify-content-center中心柱col-*)的内部row

Bootstrap 4中的垂直对齐中心Bootstrap 4
全屏居中窗体
Bootstrap 4中心输入组
Bootstrap 4水平+垂直中心全屏


是否可以使用该<section>标签,还是应该坚持使用<div>s来将内容在视口中水平和垂直居中?我有一个现有站点,该站点的页面带有更改颜色和/或背景图像的部分。
阿德里安

行的直接子代不应该是.col吗?
米格尔·史蒂文斯

7
这个答案有点破。您明确声明“不需要其他CSS”,但这是错误的。在您的代码示例中,它表明您必须在Bootstrap 4之外的CSS中将body和html设置为100%。没有此附加CSS,您的解决方案将无法正常工作。
Major Major

1
不,body和html不在“外面”。Bootstrap CSS类也可以添加到其中!codeply.com/go/5ifNMHKUEy @dawn ..具体什么不起作用?您的评论没有帮助。
Zim

容器不需要100%,但可以h-100 justify-content-center align-items-center工作
-JMP

18

这项工作对我来说:

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

1
不要忘记添加CSS样式:<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>
pyOwner

15

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>

10

您需要将表单居中放置的内容。但是因为您没有为html和body指定高度,所以它只会包装内容-而不是视口。换句话说,没有空间可以放置商品。

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

1
另外,h-100util类可用于height:100%Bootstrap4。–
Zim

1
我现在建议使用@ZimSystem的解决方案,因为它不需要自定义CSS,而仅使用Bootstrap提供的类。
Bram Vanroy

1
就像您告诉我的那样,@ BramVanroy使用了ZimSystem的解决方案,但对我而言不起作用。您的解决方案同时适用于4.0.0和4.1.0版本
Sahan Pasindu Nirmal

9

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

<div class="container text-center">

您更改以下内容

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

到以下

<div class="row text-center">

7

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

由于现在显示了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了解到的


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>

0

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


0

在CSS中使用此代码:

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

0

我到这里结束,是因为我遇到了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>

结果如下: 在此处输入图片说明


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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.