twitter-bootstrap 如何在容器中垂直居中行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42646226/
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 vertically center row in container?
提问by suonpera
By default the row aligns to the top.
默认情况下，该行与顶部对齐。
I tried to put margin-top: auto; and margin-bottom: auto; but doesn't work. Also vertical-align: middle; also does not work.
我试着把 margin-top: auto; 和保证金底部：自动；但不起作用。也垂直对齐：中间；也不起作用。
Is there an easy fix to this?
有没有简单的解决方法？
Thanks
谢谢
.container {
background-color:black;
height: 100px;
}
.row {
background-color:#fff;
height: 50px;
}<div class="container">
<div class="row">
</div>
</div>回答by Super User
You can use flexboxfor this:
您可以flexbox为此使用：
.row {
display: flex;
align-items: center;
justify-content: center;
}
回答by Zim
Basically, this question is a duplicate. There are various centering methods for Bootstrap explained in that question. This will work specifically for your scenario with the rowinside the container. Here are 2 different methods..
基本上，这个问题是重复的。该问题中解释了 Bootstrap 的各种居中方法。这将特别适用于您row的container. 这里有2种不同的方法..
// method 1 flexbox
.container-flex {
display: flex;
align-items: center;
}
// method 2 translatey
.v-center {
position: relative;
transform: translatey(-50%);
top: 50%;
}
回答by Daniel Steindl
<div class="inner">
<p>
Text
</p>
</div>
.inner {
height: 200px;
width: 300px;
background: orange;
vertical-align: middle;
display: table-cell;
}
The "Text" should be vertically aligned. Display table-cell works with vertical-align. I think it should be possible to do it with inline-elements too.
“文本”应垂直对齐。显示表格单元格与垂直对齐一起使用。我认为也应该可以使用内联元素来做到这一点。
回答by Grak T
Set width and height for row and
设置行和高度的宽度和高度
.row {
margin: 0 auto;
}
