Css Bootstrap 中心垂直和水平对齐

Bootstrap 5 (Updated 2021)个

bootstrap 5仍然基于flexbox，因此垂直居中的工作方式与 bootstrap 4中的相同.例如，可以在弹性框父对象(行或d-flex)上使用align-items-center(FLEX-DIRECTION:ROW)和justify-content-center(FLEX-DIRECTION:COLUMN).

Centering examples in Bootstrap 5个

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

• my-auto用于定心inside个挠性(.d-flex)元件
• my-auto可用于center columns(.col-)inside row
• align-items-center至center columns(col-*)inside row

Horizontal center:

• text-center居中display:inline元素列内容(&A)
• mx-auto用于在柔性元件内居中
• mx-auto可用于row内的center columns(.col-)
• justify-content-center至center columns(col-*)内row

Bootstrap 4.3+ (Update 2019)

extra CSS元有no need元.Bootstrap中已经包含的内容将会正常工作.确保表单的容器为full height.Bootstrap 4现在有一个h-100%高度的h-100级.

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%个 (或所需高度相对于居中项目的任何值)

注意:当对任何元素使用height:100%(percentage height)时，元素takes in the height of it's container.在现代浏览器中，可以使用VH单元height:100vh;而不是%来获得期望的高度.

因此，您可以设置html，body{Height:min-vh-100%}，或者在CONTAINER上使用新的min-vh-100类，而不是h-100.

Horizontal center:

• text-center居中display:inline元素列内容(&A)
• mx-auto用于在柔性元件内居中
• offset-*或mx-auto可用于center columns(.col-)
• justify-content-center至center columns(col-*)内row

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