CSS Bootstrap 4 中心垂直和水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42388989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Center Vertical and Horizontal Alignment
提问by user348173
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-centeraligns the form horizontally, but I can't figure out how to align it vertically. I have tried to use align-items-centerand align-self-center, but it doesn't work.
该justify-content-center对齐表格水平，但我无法弄清楚如何垂直对齐。我曾尝试使用align-items-centerand align-self-center，但它不起作用。
What am I missing?
我错过了什么？
回答by Zim
Update 2019- Bootstrap 4.3.1
2019年更新-Bootstrap 4.3.1
There's no needfor 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-100class for 100% height...
有没有必要进行额外的CSS。Bootstrap 中已经包含的内容将起作用。确保表单的容器是全高的。Bootstrap 4 现在有一个h-100100% 高度的类......
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://www.codeply.com/go/raCutAGHre
https://www.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)
将物品置于中心的容器的高度应为 100%（或任何所需高度相对于居中物品的高度）
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.
注意：在任何元素上使用height:100%(百分比高度) 时，该元素采用其容器的高度。在现代浏览器height:100vh;中，可以使用vh 单位而不是%获得所需的高度。
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100class on container instead of h-100.
因此，您可以设置 html、body {height: 100%}，或者min-vh-100在容器上使用新类而不是h-100.
Horizontal center:
水平中心：
text-centerto centerdisplay:inlineelements & column contentmx-autofor centering inside flex elementsoffset-*ormx-autocan be used to center columns(.col-)justify-content-centerto center columns(col-*) insiderow
text-center将display:inline元素和列内容居中mx-auto用于在 flex 元素内部居中offset-*或mx-auto可用于使列居中(.col-)justify-content-center将列(col-*)居中row
Vertical Align Center in Bootstrap 4
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen
Vertical Align Center in Bootstrap 4
Bootstrap 4 全屏居中表格
Bootstrap 4 居中输入组
Bootstrap 4 水平+垂直居中全屏
回答by karembadawy
This work for me:
这对我有用：
<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>
回答by shades3002
回答by Bram Vanroy
You need something to center your form into. But because you didn't specify a height for your html and body, it would just wrap content - and not the viewport. In other words, there was no room where to center the item in.
你需要一些东西来让你的表格居中。但是因为您没有为 html 和 body 指定高度，它只会包装内容 - 而不是视口。换句话说，没有空间可以将项目居中。
html, body {
height: 100%;
}
.container, .row.justify-content-center.align-items-center {
height: 100%;
min-height: 100%;
}
回答by ciaran kehoe
Bootstrap has text-center to center a text. For example
Bootstrap 有 text-center 来居中文本。例如
<div class="container text-center">
You change the following
您更改以下内容
<div class="row justify-content-center align-items-center">
to the following
到以下
<div class="row text-center">
回答by Paulo Pedroso
None has worked for me. But his one did.
没有一个对我有用。但他的一个。
Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:
由于 Bootstrap 4 .row 类现在是 display: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>
I learned about it from https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff
我是从https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff了解到的
回答by Waqas Bukhary
This is working in IE 11with Bootstrap 4.3. While the other answers were not working in IE11 in my case.
这在带有 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>
回答by Levani Jintcharadze
<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>回答by Balwinder Singh Sohi
Use This Code In CSS :
在 CSS 中使用此代码：
.container {
width: 600px;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
