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

Question

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

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

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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>

我的HTML就像

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

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

Answer 1

灵活的盒子方式

通过使用Flexible box布局,垂直对齐现在非常简单.如今,除了Internet Explorer 8和9之外,这种方法在各种 Web浏览器中都受支持.因此,我们需要使用一些hacks/polyfill或IE8/9的不同方法.

在下文中,我将向您展示如何仅在3行文本中执行此操作(无论旧的flexbox语法如何).

注意:最好使用其他类而不是更改.jumbotron来实现垂直对齐.我会使用vertical-center类名作为例子.

实施例在此 (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;
}

重要说明(在演示中考虑):

1. 或属性的百分比值是相对于父元素的百分比值,因此您应该明确指定父元素的值.heightmin-heightheightheight

2. 由于简洁,发布的代码段中省略了供应商前缀/旧的flexbox语法,但在在线示例中存在.

3. 在一些旧的Web浏览器(如^{我已经测试过的} Firefox 9 ^)中,flex容器(.vertical-center在这种情况下)不会占用父内部的可用空间,因此我们需要指定如下width属性:width: 100%.

4. 此外,在如上所述的某些Web浏览器中,弹性项目(.container在这种情况下)可能不会水平出现在中心.这似乎是正确应用的左/ margin中auto没有在柔性项目产生任何影响.
   因此,我们需要将其对齐box-pack / justify-content.

有关列的更多详细信息和/或垂直对齐,您可以参考以下主题:

• 与Bootstrap 3垂直对齐

传统Web浏览器的传统方式

这是我在回答这个问题时所写的旧答案.这里已经讨论过这种方法,它也可以在Internet Explorer 8和9中使用.我将简要解释一下:

在内联流中,内联级别元素可以通过vertical-align: middle声明垂直对齐中间.来自W3C的规格:

middle
将框的垂直中点与父框的基线加上父框的x高度的一半对齐.

如果.vertical-center在这种情况下父元素 - 具有明确的height,如果我们可以有一个子元素height与父元素完全相同,我们就能够将父元素的基线移动到完整的中点. - 高度的孩子,令人惊讶地让我们想要的流动儿童 - .container垂直对齐中心.

全力以赴

话虽这么说,我们可以在.vertical-centerby ::before或::afterpseudo元素中创建一个全高元素,并且还可以更改它的默认display类型和另一个子 元素.containerto inline-block.

然后使用vertical-align: middle;垂直对齐内联元素.

干得好:

<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或改变它的display类型none,如果需要这样:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

更新的演示

还有一件事:

如果容器周围有footer/ header部分,最好正确定位元素(relative,absolute？由你决定.)并添加更高的z-index值(以保证)以使它们始终位于其他元素的顶部.

Answer 2

更新2018年

Bootstrap 4包含flexbox,因此垂直居中的方法更容易,不需要额外的CSS.

只需使用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

Answer 3

添加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>

Answer 4

在Bootstrap 4中:

以水平居中的孩子,使用引导-4类:

justify-content-center

以垂直居中的孩子,使用引导-4类:

 align-items-center

但请记住不要忘记使用d-flex类,这是一个bootstrap-4实用程序类,就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

注意:如果此代码不起作用,请确保添加bootstrap-4实用程序

我知道这不是这个问题的直接答案,但它可能对某人有所帮助

Answer 5

我喜欢的技巧:

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>

另见这个小提琴!

Answer 6

在IE,Firfox和Chrome中测试过.

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>

在https://css-tricks.com/centering-css-complete-guide/上找到