Bootstrap 中心垂直和水平对齐
[英] Bootstrap Center Vertical and Horizontal Alignment
本文介绍了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 rowalign-items-center 到中心列 (col-*) inside row
水平居中:
text-center 居中 display:inline 元素 &栏目内容mx-auto 用于在 flex 元素内居中mx-auto 可用于列居中 (.col-) rowjustify-content-center 到 rowcol-*)
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><输入类型=文本"类=表单控制"id="formGroupExampleInput";占位符=示例输入">
<div class="form-group"><label for="formGroupExampleInput2">另一个标签</label><输入类型=文本"类=表单控制"id="formGroupExampleInput2";占位符=另一个输入">
</表单>
https://codeply.com/go/raCutAGHre
物品居中的容器高度应为 100%(或任何所需的高度相对于居中的项目)
注意:在任何元素上使用 height:100%(百分比高度)时，元素 考虑容器的高度.在现代浏览器中，可以使用 vh 单位 height:100vh; 代替 % 来获得所需的高度.
因此，您可以设置 html、body {height: 100%}，或者在容器上使用新的 min-vh-100 类而不是 h-100.
<小时>水平居中:
text-center 居中 display:inline 元素 &栏目内容mx-auto 用于在 flex 元素内居中offset-* 或 mx-auto 可用于列居中 (.col-)justify-content-center 到 center 列 (col-*) 在 row
<小时>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!):
my-auto for centering inside flex (.d-flex) elementsmy-auto can be used to center columns (.col-) inside rowalign-items-center to center columns (col-*) inside row
Horizontal center:
text-center to center display:inline elements & column contentmx-auto for centering inside flex elementsmx-auto can be used to center columns (.col-) inside rowjustify-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 contentmx-auto for centering inside flex elementsoffset-* 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
这篇关于Bootstrap 中心垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
