center

center

关注
发信
关注(28)粉丝(399)

Bootstrap 中心垂直和水平对齐

本文介绍了Bootstrap 中心垂直和水平对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<div class="row justify-content-center align-items-center"><表格><div class="form-group"><label for="formGroupExampleInput">示例标签</label><input type="text" class="form-control" id="formGroupExampleInput" placeholder="示例输入">
<div class="form-group"><label for="formGroupExampleInput2">另一个标签</label><input type="text" class="form-control" id="formGroupExampleInput2" placeholder="另一个输入">

</表单>

justify-content-center 水平对齐表单，但我不知道如何垂直对齐它.我曾尝试使用 align-items-center 和 align-self-center，但它不起作用.

我错过了什么?

演示

解决方案

Bootstrap 5(2021 年更新)

Bootstrap 5 仍然基于 flexbox，因此垂直居中的工作方式与 Bootstrap 4 中的相同.例如，align-items-center(flex-direction:row) 和 justify-content-center (flex-direction: column) 可用于 flexbox 父级(row 或 d-flex).

Bootstrap 5 中的居中示例

垂直中心(不要忘记父级必须有一个定义的高度！):

  • my-auto 用于将 inside flex (.d-flex) 元素居中
  • my-auto 可用于列居中 (.col-) inside row
  • align-items-center 到中心列 (col-*) inside row

水平居中:

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

Bootstrap 4.3+(2019 年更新)

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

垂直居中:

<div class="row h-100 justify-content-center align-items-center"><form class="col-12"><div class="form-group"><label for="formGroupExampleInput">示例标签</label>
<div class="form-group"><label for="formGroupExampleInput2">另一个标签</label>

</表单>

https://codeply.com/go/raCutAGHre

物品居中的容器高度应为 100%(或任何所需的高度相对于居中的项目)

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

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

水平居中:

Bootstrap 中的垂直对齐中心
Bootstrap 4 全屏居中表单
Bootstrap 4 中心输入组
Bootstrap 4 横+竖中全屏

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>

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.

What am I missing?

DEMO

解决方案

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

Horizontal center:

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:

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

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

10-28 04:31
Powered by LMLPHP ©2024 center 0.004765