本文翻译自：How to center align vertically the container in bootstrap
I'm looking for a way to vertically center align the container div inside the jumbotron and to set it in the middle of the page. 我正在寻找一种方法来垂直居中对齐jumbotron内的container div并将其设置在页面中间。
The .jumbotron has to be adapted to the full height and width of the screen so I used this CSS. .jumbotron必须适应屏幕的整个高度和宽度，所以我使用了这个CSS。
.jumbotron{
heght:100%;
width:100%;
}
The .container div has a width of 1025px and should be in the middle of the page (vertically center). .container div的宽度为1025px ，应位于页面中间（垂直中心）。
.container{
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
My HTML is like 我的HTML就像
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
So I want this page to have the jumbotron adapted to the height and width of the screen along with the container vertically center to the jumbotron. 所以我希望这个页面让jumbotron适应屏幕的高度和宽度，同时容器垂直居中于jumbotron。 How can I achieve it? 我怎样才能实现它？
#1楼
参考：https://stackoom.com/question/1V8LT/如何在引导程序中将容器垂直对齐
#2楼
The Flexible box way 灵活的盒子方式
Vertical alignment is now very simple by the use of Flexible box layout . 通过使用Flexible box布局， 垂直对齐现在非常简单。 Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we'd need to use some hacks/ polyfills or different approaches for IE8/9. 如今，除了Internet Explorer 8和9之外，这种方法在各种 Web浏览器中都受支持。因此，我们需要使用一些hacks / polyfill或IE8 / 9的不同方法 。
In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax) . 在下文中，我将向您展示如何仅在3行文本中执行此操作（无论旧的flexbox语法如何） 。
Note: it's better to use an additional class instead of altering .jumbotron to achieve the vertical alignment. 注意：最好使用附加类而不是改变.jumbotron来实现垂直对齐。 I'd use vertical-center class name for instance. 例如，我使用vertical-center类名。
Example Here (A Mirror on jsbin) . 实施例在此 （A 镜子上jsbin）。
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Important notes (Considered in the demo) : 重要说明（在演示中考虑） ：
A percentage values of
heightormin-heightproperties is relative to theheightof the parent element, therefore you should specify theheightof the parent explicitly.height或min-height属性的百分比值是相对于父元素的height的，因此您应该明确指定父级的height。Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example. 由于简洁，发布的代码段中省略了供应商前缀/旧的flexbox语法，但在在线示例中存在。
In some of old web browsers such as Firefox 9 (in which I've tested) , the flex container -
.vertical-centerin this case - won't take the available space inside the parent, therefore we need to specify thewidthproperty like:width: 100%. 在一些旧的Web浏览器（例如我已经测试过的 Firefox 9 ）中 ，flex容器 - 在这种情况下为.vertical-center- 将不占用父内部的可用空间，因此我们需要指定width属性喜欢：width: 100%。Also in some of web browsers as mentioned above, the flex item -
.containerin this case - may not appear at the center horizontally. 此外，在上面提到的某些Web浏览器中，flex项 - 在这种情况下为.container- 可能不会水平出现在中心。 It seems the applied left/rightmarginofautodoesn't have any effect on the flex item. 似乎应用的auto左/右边margin对弹性项目没有任何影响。
Therefore we need to align it bybox-pack / justify-content. 因此，我们需要通过box-pack / justify-content对齐它。
For further details and/or vertical alignment of columns, you could refer to the topic below: 有关列的更多详细信息和/或垂直对齐，您可以参考以下主题：
The traditional way for legacy web browsers 传统Web浏览器的传统方式
This is the old answer I wrote at the time I answered this question. 这是我在回答这个问题时所写的旧答案。 This method has been discussed here and it's supposed to work in Internet Explorer 8 and 9 as well. 这里已经讨论过这种方法，它也可以在Internet Explorer 8和9中使用。 I'll explain it in short: 我将简要解释一下：
In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle declaration. 在内联流中，内联级别元素可以通过vertical-align: middle声明vertical-align: middle 。 Spec from W3C : 来自W3C的规格：
middle 中间
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. 将框的垂直中点与父框的基线加上父框的x高度的一半对齐。
In cases that the parent - .vertical-center element in this case - has an explicit height , by any chance if we could have a child element having the exact same height of the parent, we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the .container - aligned to the center vertically. 如果父 - .vertical-center例中的.vertical-center元素 - 具有明确的height ，如果我们可以让子元素具有与父元素完全相同的height ，我们就能够移动父元素的基线到了全高孩子的中点，令人惊讶地让我们想要的流动儿童 - .container - 垂直对齐中心。
Getting all together 全力以赴
That being said, we could create a full-height element within the .vertical-center by ::before or ::after pseudo elements and also change the default display type of it and the other child, the .container to inline-block . 话虽这么说，我们可以在.vertical-center创建一个全高元素by ::before或::after伪元素，并且还可以更改它的默认display类型和另一个子.container到inline-block 。
Then use vertical-align: middle; 然后使用vertical-align: middle; to align the inline elements vertically. 垂直对齐内联元素
Here you go: 干得好：
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
WORKING DEMO . 工作演示 。
Also, to prevent unexpected issues in extra small screens, you can reset the height of the pseudo-element to auto or 0 or change its display type to none if needed so: 另外，为了防止超小屏幕出现意外问题，您可以将伪元素的高度重置为auto或0或者在需要时将其display类型更改为none ：
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
And one more thing: 还有一件事：
If there are footer / header sections around the container, it's better to position that elements properly ( relative , absolute ? up to you.) and add a higher z-index value (for assurance) to keep them always on the top of the others. 如果容器周围有footer / header部分，最好将这些元素正确定位（ relative ， absolute ？取决于你。）并添加更高的z-index值（以保证）以使它们始终位于其他元素的顶部。 。
#3楼
add Bootstrap.css then add this to your css 添加Bootstrap.css然后将其添加到您的CSS
html, body{height:100%; margin:0;padding:0} .container-fluid{ height:100%; display:table; width: 100%; padding: 0; } .row-fluid {height: 100%; display:table-cell; vertical-align: middle;} .centering { float:none; margin:0 auto; } Now call in your page <div class="container-fluid"> <div class="row-fluid"> <div class="centering text-center"> Am in the Center Now :-) </div> </div> </div> #4楼
My prefered technique : 我喜欢的技巧：
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Demo 演示
body { display: table; position: absolute; height: 100%; width: 100%; } .jumbotron { display: table-cell; vertical-align: middle; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="jumbotron vertical-center"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div class="col-md-5 iPhone-features"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg top-features-bg"></i></span> <p><strong>Redirect</strong><br>Visitors where they converts more.</p> </li> <li> <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span> <p><strong>Track</strong><br>Views, Clicks and Conversions.</p> </li> <li> <span><i class="fa fa-check simple_bg top-features-bg"></i></span> <p><strong>Check</strong><br>Constantly the status of your links.</p> </li> <li> <span><i class="fa fa-users simple_bg top-features-bg"></i></span> <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p> </li> <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a> <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6> </ul> </div> </div> </div> </div> See also this Fiddle ! 另见这个小提琴 ！
#5楼
Here is the way which i am using for align content vertically - top/center/bottom with bootstrap 3 rows: 这是我用于垂直对齐内容的方式 - 顶部/中心/底部与引导3行：
Here is fiddle Demo: js fiddle 这是小提琴演示： js小提琴
Bootstrap 3 columns with same height and vertically aligned -
/* columns of same height styles */ .row-full-height { height: 100%; } .col-full-height { height: 100%; vertical-align: middle; } .row-same-height { display: table; width: 100%; /* fix overflow */ table-layout: fixed; } .col-xs-height { display: table-cell; float: none !important; } @media (min-width: 768px) { .col-sm-height { display: table-cell; float: none !important; } } @media (min-width: 992px) { .col-md-height { display: table-cell; float: none !important; } } @media (min-width: 1200px) { .col-lg-height { display: table-cell; float: none !important; } } /* vertical alignment styles */ .col-top { vertical-align: top; } .col-middle { vertical-align: middle; } .col-bottom { vertical-align: bottom; <div class="container"> <h2>Demo 1</h2> <div class="row"> <div class="row-same-height"> <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div> <div class="col-xs-3 col-xs-height col-top">2st column</div> <div class="col-xs-3 col-xs-height col-middle">3st column</div> <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div> </div> </div><!-- ./row --> </div><!-- ./container --> #6楼
Update 2018 更新2018年
Bootstrap 4 includes flexbox, so the method of vertical centering is much easier and doesn't require extra CSS . Bootstrap 4包含flexbox，因此垂直居中的方法更容易， 不需要额外的CSS 。
Just use the d-flex and align-items-center utility classes.. 只需使用d-flex和align-items-center实用程序类。
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
http://www.codeply.com/go/ui6ABmMTLv http://www.codeply.com/go/ui6ABmMTLv
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
