如何居中alignment自举容器
我正在寻找一种方法来垂直居中alignmentjumbotron的container div，并将其设置在页面中间。
.jumbotron必须适应屏幕的整个高度和宽度，所以我使用了这个CSS。
.jumbotron{ heght:100%; width:100%; }
.container div的宽度为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>
所以我希望这个页面的大小适合于屏幕的高度和宽度，以及集装箱垂直居中的大小。 我怎样才能做到这一点？
灵活的盒子方式
通过使用灵活的盒子布局， 垂直alignment现在非常简单。 现在，除Internet Explorer 8和9以外，这种方法在各种浏览器中得到支持。因此，我们需要对IE8 / 9使用一些hacks / polyfill或不同的方法 。
下面我将向您展示如何在只有三行文本的情况下执行此操作（不pipe旧的Flexbox语法如何） 。
注意：最好使用额外的类而不是改变.jumbotron来实现垂直alignment。 我会使用vertical-center类名称。
示例 （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; }
重要注意事项（在演示中考虑） ：
-
height或min-height属性的百分比值与父元素的height有关，因此应该明确指定父元素的height。 -
供应商前缀/旧的Flexbox语法由于简洁而在发布的代码段中省略，但存在于在线示例中。
-
在一些旧的浏览器中，例如Firefox 9 （我已经testing过） ，在这种情况下，flex容器（
.vertical-center不会占用父容器内的可用空间，因此我们需要指定width属性如：width: 100%。 -
同样在上面提到的一些网页浏览器中，Flex项目 – 在这种情况下 –
.container– 可能不会出现在水平中心。 看来auto应用的左/右边margin对flex项目没有任何影响。
因此，我们需要通过box-pack / justify-content来alignment它。
有关列的更多详细信息和/或垂直alignment，请参阅下面的主题：
- 与Bootstrap 3垂直alignment
传统网页浏览器的传统方式
这是我在回答这个问题的时候写的旧的答案。 这个方法已经在这里讨论过了 ，它应该可以在Internet Explorer 8和9中工作。 我简单地解释一下：
在内联stream程中，内联层级元素可以通过vertical-align: middle声明vertical-align: middle 。 来自W3C的规范 ：
中间
将框的垂直中点与父框的基线加上父框的一半x高度alignment。
在这种情况下，parent – .vertical-center元素有一个明确的height ，如果我们可以有一个具有完全相同height的父元素的子元素，我们将能够移动父元素的基线到全高的孩子的中点，并令人惊讶地使我们想要的stream动孩子 – .container垂直alignment中心。
整合在一起
也就是说，我们可以在.vertical-center通过::before或::after伪元素创build一个全高元素，并且还可以将其默认displaytypes和另一个子.container为inline-block 。
然后使用vertical-align: middle; 垂直alignment内联元素。
干得好：
<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; }
工作演示 。
此外，为了防止在超小屏幕上出现意外的问题，您可以将伪元素的高度重置为auto或0或者根据需要将其displaytypes更改为none ：
@media (max-width: 768px) { .vertical-center:before { height: auto; /* Or */ display: none; } }
更新的演示
还有一件事：
如果容器周围有footer / header部分，最好将这些元素正确地放置（ relative ， absolute ），并添加一个更高的z-index值（用于保证），以保持它们始终位于其他位置。
添加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>
2017年更新
引导程序4 （目前在Alpha中）包含flexbox，因此垂直居中的方法更容易， 不需要额外的CSS 。
只需使用d-flex和align-items-center工具类即可
<div class="jumbotron d-flex align-items-center"> <div class="container"> content </div> </div>
我的首选技术：
body { display: table; position: absolute; height: 100%; width: 100%; } .jumbotron { display: table-cell; vertical-align: middle; }
演示
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>
在IE，Firfox和Chrome中testing
CSS：
.parent-container { position: relative; height:100%; width: 100%; } .child-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
HTML：
<div class="parent-container"> <div class="child-container"> <h2>Header Text</h2> <span>Some Text</span> </div> </div>
这里是我用来垂直alignment内容的方式 – 顶部/中间/底部与引导3行：
这里是小提琴演示： 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 -->
