Bootstrap 4中心垂直和水平对齐 [英] Bootstrap 4 Center Vertical and Horizontal Alignment

问题描述

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

I have a page where only form exists and I want form to be placed in the center of the screen.

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

The justify-content-center aligns the form horizontally, but I can't figure out how to align it vertically. I have tried to use align-items-center and align-self-center, but it doesn't work.

我想念什么?

演示

推荐答案

更新2019 - Bootstrap 4.3.1

不需要额外的CSS . Bootstrap中已经包含的内容将起作用.确保表单的容器为全高. Bootstrap 4现在有一个h-100类，高度为100％...

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

垂直中心:

<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％ (或所需的相对于居中位置的高度)

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)

注意:在任何元素上使用height:100%(百分比高度)时，元素 占用容器的高度 .在现代浏览器中，可以使用height:100vh;而不是%的vh单位来获得所需的高度.

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.

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

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

水平中心:

• text-center以display:inline元素为中心&列内容
• mx-auto用于在flex元素内部居中
• offset-*或mx-auto可以用于中心列(.col-)
• justify-content-center到row
中的中心列(col-*)

• 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

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

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

这篇关于Bootstrap 4中心垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！