如何在Bootstrap中将容器垂直居中？

333

我正在寻找一种将containerdiv 垂直居中放置jumbotron在页面中间的方法。

在.jumbotron必须适应于屏幕的整个高度和宽度。的.containerdiv有一个宽度1025px和应在该页面（垂直中心）的中间。

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

.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>
展开摘要

html  css  twitter-bootstrap  twitter-bootstrap-3  vertical-alignment 
— 用户名
source
— Gothburz
css-vertical-center.com存在一些具有浏览器兼容性信息的解决方案
— EscapeNetscape

Answers:

598

灵活的盒子方式

现在，通过使用灵活框布局，垂直对齐非常简单。如今，除Internet Explorer 8和9之外，各种 Web浏览器都支持此方法。因此，对于IE8 / 9，我们需要使用一些hacks / polyfill或其他方法。

在下面的内容中，我将向您展示如何仅用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. 一个百分比值height或min-height性质是相对height父元素的，因此，你应该指定height明确的母公司。

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

  3. 在一些旧的Web浏览器如Firefox 9 （在我测试过），柔性容器- .vertical-center在这种情况下-不会占用可用空间父里面，所以我们需要指定width类似属性：width: 100%。

  4. 同样在如上所述的某些Web浏览器中，伸缩项目- .container在这种情况下-可能不会水平出现在中央。看来所施加的左/右margin的auto没有在柔性项目产生任何影响。
    因此，我们需要将其对齐box-pack / justify-content。

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

传统Web浏览器的传统方式

这是我回答这个问题时写的旧答案。此方法已在此处进行了讨论，并且应该也可以在Internet Explorer 8和9中使用。我将简短地解释一下：

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

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

如果父.vertical-center元素（在这种情况下）具有显式的元素，height则只要我们有可能使子元素具有height与父元素完全相同的子元素，我们便可以将父元素的基线移至整个元素的中点。高度的子项，令人惊讶地使我们所需的流入子项- .container与中心垂直对齐。

聚在一起

话虽如此，我们可以在.vertical-centerby ::before或::after伪元素内创建全高元素，还可以更改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值（以确保），以使它们始终位于其他元素的顶部。

— 哈希姆·夸拉米
source
— 2014年
这一切都很好，但是一旦添加display: flex到.container，它就会导致孩子.rows翻转出来。因此，似乎flexbox方式将要求我们放弃使用一些主要的自举功能？
— 亚伯拉罕·布鲁克斯
传统方式对我有用。
— 尼克W
118

更新2019

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

重要：垂直居中是相对于高度。您要居中的项目的父容器必须具有定义的高度。如果要使用页面的高度vh-100或使用min-vh-100父级！例如：

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

另请参阅：Bootstrap 4中的垂直对齐中心

— 齐姆
source
51

添加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>
展开摘要

— 伦图库
source
3
html AND body {高度：100％；}是关键
— xxxbence
28

在 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实用程序

我知道这不是此问题的直接答案，但可能会对某人有所帮助

这似乎只是复制Zim的答案。
— TylerH
9

我喜欢的技术：

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>
展开摘要

另请参阅此小提琴！

— 约翰·斯莱格斯
source
6

在IE，Firefox和Chrome中进行了测试。

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<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/上找到

— 马丁·皮克
source
0

用于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>
— 拉米尔·吉尔法诺夫（Ramil Gilfanov）
source
这似乎只是复制Zim的答案。
— TylerH
0

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

.jumbotron{
  height:100%;
  width:100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
展开摘要

这些类：d-table，d-table-cell，w-100，h-100和align-middle可以胜任

— 大卫·马丁内斯·埃斯圭拉
source
0

给容器课 

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

给出容器内的div：

align-content: center;

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

— 皮埃尔·阿比·查克拉
source
-3

这是我用于垂直对齐内容的方式-带有自举3行的顶部/中央/底部。引导3个具有相同高度并垂直对齐的列。

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

这是一个JSFiddle演示。

— 莫汉德雷
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.