Question

我正在寻找一种垂直居中对齐container内jumbotron 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>

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

Answer 1

灵活的方式

垂直对齐现在使用Flexible box layout非常简单。如今，除了Internet Explorer 8和Internet Explorer之外的wide range网络浏览器支持此方法。 9.因此，对于IE8 / 9，我们需要使用一些hacks / polyfills或different approaches。

在下文中，我将向您展示如何仅在 3行的文本中进行此操作（无论旧的flexbox语法如何）。

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

Example Here （jsbin上的 Mirror ）。

<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，因此您应指定{{ 1}}明确的父。
由于简洁，发布的代码段中省略了供应商前缀/旧的flexbox语法，但在在线示例中存在。
在一些旧的网络浏览器中，例如Firefox 9 ^{（我已经测试过）}，灵活容器 - 在这种情况下为height - 将不会父级内的可用空间，因此我们需要指定.vertical-center属性，如：width。
同样在上面提到的某些网络浏览器中，弹性项目 - 在这种情况下为width: 100% - 可能不会水平出现在中心。似乎应用.container的左/右margin对Flex项目没有任何影响因此，我们需要将其与auto对齐。

有关列的更多详细信息和/或垂直对齐方式，请参阅以下主题：

vertical-align with Bootstrap 3

传统网络浏览器的传统方式

这是我在回答这个问题时所写的旧答案。此方法已经讨论过 here ，它也应该适用于Internet Explorer 8和9。我将简要解释一下：

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

<强>中间
将框的垂直中点与父框的基线加上父框的x高度的一半对齐。

如果父案例 - 在这种情况下为box-pack / justify-content元素 - 具有明确的.vertical-center，那么如果我们可以让子元素与父元素完全相同height ，我们可以to move the baseline of the parent到达全身儿童的中点，并令人惊讶地让我们想要的流动儿童 - height - 垂直对齐中心。

全力以赴

话虽这么说，我们可以在.container .vertical-center或::before个伪元素中创建一个全高元素，并且还可以更改它的默认::after类型另一个孩子，display到.container。

然后使用inline-block垂直对齐内联元素。

你走了：

vertical-align: middle;

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

<强> WORKING DEMO

另外，为防止超小屏幕出现意外问题，您可以将伪元素的高度重置为.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

<强> UPDATED DEMO

还有一件事：

如果容器周围有@media (max-width: 768px) { .vertical-center:before { height: auto; /* Or */ display: none; } } / footer个部分，最好将这些元素正确放置（header，relative？由您决定。） 并添加更高的absolute值（用于保证），以使它们始终位于其他值的顶部。

Answer 2

更新2018

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

只需使用public OnMousePressCasino onMousePressCasinoBarthender; public OnMousePressCasino onMousePressCasinoDoorToStreet; void Start() { onMousePressCasinoBarthender.OnAction += MeAction; onMousePressCasinoDoorToStreet.OnAction += MeAction; } void MeAction(object sender, MeEventArgs e) { if(e.Action == 1) { // do something } else if (e.Action == 2) { // do something else. } }和d-flex实用程序类..

align-items-center

http://www.codeply.com/go/ui6ABmMTLv

Answer 3

添加Bootstrap.css然后将其添加到您的CSS

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 4

在 Bootstrap 4 ：

将孩子水平居中 ，请使用bootstrap-4课程：

justify-content-center

垂直居中 ，使用bootstrap-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;
}

演示

＆＃13;

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

＆＃13;

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

＆＃13;

另见this Fiddle！

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/

上找到

Answer 7

针对bootstrap4少数几个项目的垂直中心

d-flex （用于弹性规则）

柔性柱用于项目的垂直方向

对齐内容中心以居中

style ='height：300px;'必须具有用于计算中心或使用 h-100 类

的设置点

然后为水平中心 div d-flex调整内容中心 还有一些容器

所以我们有3个标签的层次结构：div-column-> div-row-> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div>

Answer 8

如果您使用的是Bootstrap 4，则只需添加2个div：

@media (max-width: 800px){
div a { width: 150px; clear:both;}
}

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

d-table，d-table-cell，w-100，h-100和align-middle等类可以完成工作

Answer 9

提供容器类

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

给出容器内的div：

align-content: center;

该div中的所有内容都将显示在页面中间。

Answer 10

将中心与 bootstrap 4 垂直对齐

将此类：d-flex align-items-center 添加到元素

示例

如果你有这个：

<div class="col-3">

改成这样：

<div class="col-3 d-flex align-items-center>

Answer 11

以下是我用于垂直对齐内容的方式 - top / center / bottom with bootstrap 3行：

这是小提琴演示： js fiddle

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

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

11 个答案:

灵活的方式

传统网络浏览器的传统方式

全力以赴

更新2018

演示

将中心与 bootstrap 4 垂直对齐

示例