CSS 如何使用 Bootstrap 垂直和水平居中 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26941443/
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
How to center vertically and horizontally a div using Bootstrap?
提问by Jerielle
I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.
我的 CSS 有问题。我的索引页中有一个面板表单，我想将它垂直和水平移动到页面中间。但我不知道如何为此创建 CSS。
Here's my sample code:
这是我的示例代码：
<div class="login_header"></div>
<div class="container" style="text-align: center;">
<div class="col-md-6 col-md-offset-3">
<div class="panel_form panel panel-default">
<div class="panel-content">
<h1>test</h1>
</div>
<div class="panel-footer">
<p>test</p>
</div>
</div>
</div>
</div>
<footer class="footer"></footer>
I have a CSS like this:
我有一个这样的 CSS：
.login_header { min-height: 50px; background-color: #f5f5f5; }
.panel_form {
/* I don't have an idea with this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
I am not good enough in CSS that's why I need your help. That's all thanks.. :)
我在 CSS 方面不够好，所以我需要你的帮助。就这些了，谢谢.. ：）
回答by Todd
So, check this out; it's pretty cool
所以，看看这个；它太酷了
HERES A CODE PEN TO SEE IT IN ACTION
html, body 100% width and height;
html, body 100% 宽高；
container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.
具有 100% 宽度和高度的相对或固定定位的容器，如果您想在视口中居中。如果你只是想在元素中控制它，大小并不重要。
centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);
居中的东西需要绝对定位，顶部和左侧 50%，然后使用 transform: translate(-50%, -50%);
regardless of its size, it's centered in viewport
无论其大小如何，它都以视口为中心
CSS
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
}
#outer #container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
LESS version
少版本
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
#container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;top: 50%;
}
}
回答by speti43
回答by pratyay
I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.
我发现一些答案很难实施。但是，这个问题似乎是最基本的问题之一，因此这里有一个答案，像我这样的其他人可能会觉得有用。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
hello world!
</div>回答by Blake Stevenson
Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:
这个问题的其他一些答案使用带有表格和自定义 CSS 类的 CSS hacks。正如海报所问“如何使用 Bootstrap垂直和水平居中”，以下是仅使用 Bootstrap 4 实用程序类的方法：
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.
需要注意的是，由于父 div 上的样式，在同一个 div 中添加其他元素时，它们将出现在第一个元素的旁边，而不是它的下方。要解决这个问题，只需在父级中添加一个额外的 div 来重置样式。
<div class="d-flex justify-content-md-center align-items-center vh-100">
<div>
<p>Content 1</p>
<p>Content 2</p>
</div>
</div>
This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.
这确实适用于 Bootstrap flex，我发现它在像这样放置在 flex 组件中时效果最好，而不是包裹整行。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 1</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 2</p>
</div>
</div>
</div>
</div>
Here is a breakdown of each class:
以下是每个班级的细分：
d-flex: Effectivelydisplay: flex, allows the div to grow or shrink depending on the amount of content.justify-content-md-center: Justifies content in the center of the page, can also be replaced withjustify-content-sm-centerorjustify-content-lg-centerto change the breakpoint.align-items-center: Centers the alignments of all items in a div.vh-100: Sets the height of the div to100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
d-flex：有效地display: flex，允许 div 根据内容量增长或缩小。justify-content-md-center: 对齐页面中心的内容，也可以替换为justify-content-sm-center或justify-content-lg-center更改断点。align-items-center: 将 div 中所有项目的对齐方式居中。vh-100: 将 div 的高度设置为100vh, 或 100“垂直高度”。这确保 div 是正确的高度以允许垂直对齐。
回答by aspencer8111
Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically
在这里提问和回答：Twitter Bootstrap - 如何水平或垂直居中元素
But the short of it is:
但缺点是：
<div class="center-block">...</div>
<div class="center-block">...</div>
Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center
链接到 Bootstrap 文档：http: //getbootstrap.com/css/#helper-classes-center
回答by Philipp Meissner
Give the outer div display: table; and the inner div display: table-cell Then you can use vertical-align: center on the inner div
给外层div显示：table；和内部 div display: table-cell 然后你可以使用 vertical-align: center 在内部 div
Read further: Twitter Bootstrap - how to center elements horizontally or vertically
