如何在引导程序中将容器垂直对齐

Question

如何在引导程序中将容器垂直对齐

我正在寻找一种垂直居中对齐containerdiv的方法，jumbotron并将其设置在页面中间。

在.jumbotron必须适应屏幕的整个高度和宽度，所以我用这个CSS。

.jumbotron{
  heght:100%;
  width:100%;}

的.containerdiv有一个宽度1025px和应在该页面（垂直中心）的中间。

.container{
  width:1025px;}.jumbotron .container {
  max-width: 100%;}

我的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>

所以我希望这个页面让jumbotron适应屏幕的高度和宽度，同时容器垂直居中于jumbotron。我怎样才能实现它？

Answer 1

灵活的盒子方式通过使用Flexible box布局，垂直对齐现在非常简单。如今，除了Internet Explorer 8和9之外，这种方法在各种&nbsp;Web浏览器中都受支持。因此，我们需要使用一些hacks /&nbsp;polyfill或IE8 / 9的不同方法。在下文中，我将向您展示如何仅在3行文本中执行此操作（无论旧的flexbox语法如何）。注意：最好使用其他类而不是更改.jumbotron来实现垂直对齐。我会使用vertical-center类名作为例子。实施例在此&nbsp;（A&nbsp;镜子上jsbin）&nbsp;。<div&nbsp;class="jumbotron&nbsp;vertical-center">&nbsp;<!--&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^---&nbsp;Added&nbsp;class&nbsp;&nbsp;--> &nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;</div></div>.vertical-center&nbsp;{ &nbsp;&nbsp;min-height:&nbsp;100%;&nbsp;&nbsp;/*&nbsp;Fallback&nbsp;for&nbsp;browsers&nbsp;do&nbsp;NOT&nbsp;support&nbsp;vh&nbsp;unit&nbsp;*/ &nbsp;&nbsp;min-height:&nbsp;100vh;&nbsp;/*&nbsp;These&nbsp;two&nbsp;lines&nbsp;are&nbsp;counted&nbsp;as&nbsp;one&nbsp;:-)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;align-items:&nbsp;center;}重要说明（在演示中考虑）：或属性的百分比值是相对于父元素的百分比值，因此您应该明确指定父元素的值。heightmin-heightheightheight由于简洁，发布的代码段中省略了供应商前缀/旧的flexbox语法，但在在线示例中存在。在一些旧的Web浏览器（如我已经测试过的&nbsp;Firefox 9&nbsp;）中，flex容器（.vertical-center在这种情况下）不会占用父内部的可用空间，因此我们需要指定如下width属性：width: 100%。此外，在如上所述的某些Web浏览器中，弹性项目（.container在这种情况下）可能不会水平出现在中心。这似乎是正确应用的左/&nbsp;margin中auto没有在柔性项目产生任何影响。因此，我们需要将其对齐box-pack / justify-content。有关列的更多详细信息和/或垂直对齐，您可以参考以下主题：与Bootstrap 3垂直对齐传统Web浏览器的传统方式这是我在回答这个问题时所写的旧答案。这里已经讨论过这种方法，它也可以在Internet Explorer 8和9中使用。我将简要解释一下：在内联流中，内联级别元素可以通过vertical-align: middle声明垂直对齐中间。来自W3C的规格：middle将框的垂直中点与父框的基线加上父框的x高度的一半对齐。如果.vertical-center在这种情况下父元素 - 具有明确的height，如果我们可以有一个子元素height与父元素完全相同，我们就能够将父元素的基线移动到完整的中点。 - 高度的孩子，令人惊讶地让我们想要的流动儿童 -&nbsp;.container垂直对齐中心。全力以赴话虽这么说，我们可以在.vertical-centerby&nbsp;::before或::afterpseudo元素中创建一个全高元素，并且还可以更改它的默认display类型和另一个子&nbsp;元素.containerto&nbsp;inline-block。然后使用vertical-align: middle;垂直对齐内联元素。干得好：<div&nbsp;class="jumbotron&nbsp;vertical-center"> &nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;</div></div>.vertical-center&nbsp;{ &nbsp;&nbsp;height:100%; &nbsp;&nbsp;width:100%; &nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;/*&nbsp;align&nbsp;the&nbsp;inline(-block)&nbsp;elements&nbsp;horizontally&nbsp;*/ &nbsp;&nbsp;font:&nbsp;0/0&nbsp;a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;remove&nbsp;the&nbsp;gap&nbsp;between&nbsp;inline(-block)&nbsp;elements&nbsp;*/}.vertical-center:before&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;create&nbsp;a&nbsp;full-height&nbsp;inline&nbsp;block&nbsp;pseudo=element&nbsp;*/ &nbsp;&nbsp;content:&nbsp;"&nbsp;"; &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;vertical-align:&nbsp;middle;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;vertical&nbsp;alignment&nbsp;of&nbsp;the&nbsp;inline&nbsp;element&nbsp;*/ &nbsp;&nbsp;height:&nbsp;100%;}.vertical-center&nbsp;>&nbsp;.container&nbsp;{ &nbsp;&nbsp;max-width:&nbsp;100%; &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;vertical-align:&nbsp;middle;&nbsp;&nbsp;/*&nbsp;vertical&nbsp;alignment&nbsp;of&nbsp;the&nbsp;inline&nbsp;element&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;reset&nbsp;the&nbsp;font&nbsp;property&nbsp;*/ &nbsp;&nbsp;font:&nbsp;16px/1&nbsp;"Helvetica&nbsp;Neue",&nbsp;Helvetica,&nbsp;Arial,&nbsp;sans-serif;}工作演示。另外，为了防止意外的问题在额外的小屏幕，你可以将伪元素的高度重置auto或0或改变它的display类型none，如果需要这样：@media&nbsp;(max-width:&nbsp;768px)&nbsp;{ &nbsp;&nbsp;.vertical-center:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Or&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;}}更新的演示还有一件事：如果容器周围有footer/&nbsp;header部分，最好正确定位元素（relative，absolute？由你决定。）并添加更高的z-index值（以保证）以使它们始终位于其他元素的顶部。

Answer 2

添加Bootstrap.css然后将其添加到您的CSS&nbsp;&nbsp;&nbsp;html,&nbsp;body{height:100%;&nbsp;margin:0;padding:0} &nbsp;.container-fluid{ &nbsp;&nbsp;height:100%; &nbsp;&nbsp;display:table; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;padding:&nbsp;0;} &nbsp;.row-fluid&nbsp;{height:&nbsp;100%;&nbsp;display:table-cell;&nbsp;vertical-align:&nbsp;middle;} &nbsp; &nbsp;.centering&nbsp;{ &nbsp;&nbsp;float:none; &nbsp;&nbsp;margin:0&nbsp;auto;}Now&nbsp;call&nbsp;in&nbsp;your&nbsp;page&nbsp; <div&nbsp;class="container-fluid"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row-fluid"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="centering&nbsp;text-center"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Am&nbsp;in&nbsp;the&nbsp;Center&nbsp;Now&nbsp;:-)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>