如何在Bootstrap中将容器垂直居中? [英] How to vertically center a container in Bootstrap?

问题描述

我正在寻找一种方法，将container div在jumbotron内垂直居中并将其设置在页面中间.

I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page.

.jumbotron必须适应屏幕的整个高度和宽度. .container div的宽度为1025px，应位于页面中间(垂直居中).

The .jumbotron has to be adapted to the full height and width of the screen. The .container div has a width of 1025px and should be in the middle of the page (vertically center).

我希望此页面上的大屏幕适应屏幕的高度和宽度，并且容器垂直于大屏幕垂直居中.我该如何实现?

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. How can I achieve it?

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

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

推荐答案

灵活的装箱方式

现在，使用灵活的盒子布局.如今，除Internet Explorer 8及更高版本的Web浏览器的范围广泛的均支持此方法. 9.因此，我们需要使用一些技巧/ polyfills 或

The Flexible box way

Vertical alignment is now very simple by the use of Flexible box layout. 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.

在下面，我将向您展示如何仅用 3行文本(与旧的flexbox语法无关).

In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax).

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

Note: it's better to use an additional class instead of altering .jumbotron to achieve the vertical alignment. I'd use vertical-center class name for instance.

此处的示例 (A 在上镜像 ).

Example Here (A Mirror on 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属性的

1. A percentage 值相对于父元素的height，因此您应明确指定父元素的height.

1. A percentage values of height or min-height properties is relative to the height of the parent element, therefore you should specify the height of the parent explicitly.

为简短起见，在发布的代码段中省略了供应商前缀/旧的flexbox语法，但在线示例中存在.

Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example.

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

In some of old web browsers such as Firefox 9 ^{(in which I've tested)}, the flex container - .vertical-center in this case - won't take the available space inside the parent, therefore we need to specify the width property like: width: 100%.

在如上所述的某些Web浏览器中，伸缩项-在这种情况下-.container-可能不会水平出现在中央.似乎应用的auto的左/右margin对弹性项目没有任何影响.
因此，我们需要按box-pack / justify-content对其进行对齐.

Also in some of web browsers as mentioned above, the flex item - .container in this case - may not appear at the center horizontally. It seems the applied left/right margin of auto doesn't have any effect on the flex item.
Therefore we need to align it by box-pack / justify-content.

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

For further details and/or vertical alignment of columns, you could refer to the topic below:

• 与Bootstrap 3垂直对齐

这是我回答这个问题时写的旧答案.已经讨论了该方法 ，它也应该可以在Internet Explorer 8和9中使用.我将简短地解释一下:

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. I'll explain it in short:

在内联流程中，可以通过 vertical-align: middle 声明.来自 W3C

In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle declaration. Spec from W3C:

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

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

如果父级-在此例中的.vertical-center元素具有显式的height，如果我们有一个与父级完全相同的height子元素，则有可能移动父级的基线到全高子级的中点，并且令人惊讶地使我们想要的流入子级.container-垂直对齐中心.

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中通过::before或::after伪元素创建全高元素，还可以更改其默认的display类型以及其他子元素.container到inline-block.

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-align: middle;将内联元素垂直对齐.

Then use vertical-align: middle; to align the inline elements vertically.

您在这里:

<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.

此外，为防止在超小屏幕上出现意外问题，您可以将伪元素的高度重置为auto或0，或在需要时将其display类型更改为none:

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:

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

更新后的演示

UPDATED DEMO

还有一件事:

如果容器周围有footer/header部分，则最好将元素正确放置(relative，absolute?由您决定.)，并添加一个更高的z-index有价值(为了保证)，使它们始终位于他人之首.

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.

这篇关于如何在Bootstrap中将容器垂直居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！