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

问题描述 投票：305回答：9

我正在寻找一种方法，可以将container div在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
9个回答
556
投票

灵活箱方式

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

下面，我将仅显示文本（（与旧的flexbox语法无关）。）中的3行文本。

注：

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

[Example Here

（jsbin上的A 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;
}

重要
注释（在演示中考虑）：

  1. height或min-height属性的值相对于父元素的height，因此您应明确指定父元素的height。

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

  • 在某些旧的Web浏览器中，例如Firefox 9

    （在我已经测试过）

    • ，flex容器-在这种情况下为.vertical-center-不会占用父级内部的可用空间，因此我们需要指定width属性，例如：width: 100%。
  • 此外，在如上所述的某些Web浏览器中，弹性项目-在这种情况下为.container-可能不会水平出现在中央。似乎margin的左/右auto对弹性项目没有任何影响。因此，我们需要通过box-pack / justify-content对其进行对齐。

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

      vertical-align with Bootstrap 3
    • 传统的Web浏览器的传统方式

      这是我回答这个问题时写的旧答案。此方法已在

      here

      • 中进行了讨论，并且应该也可以在Internet Explorer 8和9中使用。我会简单解释一下：
    在内联流程中，可以通过vertical-align: middle声明将内联级别元素垂直对齐到中间。来自vertical-align: middle的规范：

    中间

    将框的垂直中点与父框的基线对齐，再加上父框x高度的一半。[如果父元素-在这种情况下为W3C元素-具有明确的.vertical-center，如果我们可以拥有一个与父元素完全相同的height子元素，则我们可以[C0 ]到全高子项的中点，并且令人惊讶地使我们所需的流入子项height-垂直对齐中心。]

    聚在一起

    话虽如此，我们可以通过to move the baseline of the parent或.container伪元素在.vertical-center内创建全高元素，也可以将其和其他子元素::before的默认::after类型更改为display。

    然后使用.container垂直对齐内联元素。

    您在这里：

    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;
}
或WORKING DEMO，或者在需要时将其auto类型更改为0：
    display
    none
    还有另一件事：
    如果容器周围有@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}
 / UPDATED DEMO节，最好将元素正确放置
    （footer，header？由您决定。]
    并添加更高的relative值（为保证起见），以使其始终位于其他人的顶部。
    2019年更新

    Bootstrap 4

    包含flexbox，因此垂直居中的方法要容易得多，并且不需要额外的CSS
    。
    只需使用absolute和z-index实用程序类。

    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     
    添加Bootstrap.css，然后将其添加到您的CSS 
    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>

     
    在
       
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;
}：
    要
    将孩子水平居中
    ，请使用bootstrap-4类：
    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>
    要
    将孩子垂直居中
    ，请使用bootstrap-4类：Bootstrap 4
    但请记住不要忘记将
    d-flex
    类与这些这是bootstrap-4实用程序类，像这样justify-content-center

    注意：
    如果此代码不起作用，请确保添加bootstrap-4实用程序    我知道这不是此问题的直接答案，但可能会对某人有所帮助

    我最喜欢的技术：

    align-items-center 

    演示

    <div class="d-flex justify-content-center align-items-center" style="height:100px;"> <span class="bg-primary">MIDDLE</span> </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;
}！

    在IE，Firefox和Chrome中测试。

    <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>
    this Fiddle
    在.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>几个项目的垂直中心

    d-flex

    用于伸缩规则

    flex-column

    用于项目的垂直方向

    justify-content-center

    居中

    style ='height：300px;'

    必须具有用于计算中心或使用h-100 class的设置点然后是水平中心

    div d-flex对齐内容中心

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

    https://css-tricks.com/centering-css-complete-guide/

     
    如果使用的是Bootstrap 4，则只需添加2个div：
     
    bootstrap4
         <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> 

    类：d-table，d-table-cell，w-100，h-100和align-middle将完成工作
     
    这是我用于垂直对齐内容的方法-顶部/中央/底部具有自举3行。引导3个具有相同高度并垂直对齐的列。 
     
    .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>
    这里是/* 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;演示。
    76
    投票
    2019年更新

    Bootstrap 4

    包含flexbox，因此垂直居中的方法要容易得多，并且不需要额外的CSS
    50
    投票
    添加Bootstrap.css，然后将其添加到您的CSS

    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>

    在
       
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;
}：
    要
    将孩子水平居中
    26
    投票
    在

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

    8
    投票
    我最喜欢的技术：

    align-items-center 

    演示
    6
    投票
    在IE，Firefox和Chrome中测试。
    0
    投票
    对于<div class="parent-container"> <div class="child-container"> <h2>Header Text</h2> <span>Some Text</span> </div> </div>几个项目的垂直中心
    0
    投票
    如果使用的是Bootstrap 4，则只需添加2个div：

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

    类：d-table，d-table-cell，w-100，h-100和align-middle将完成工作

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

    .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>
    这里是/* 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;演示。
    -3
    投票
    这是我用于垂直对齐内容的方法-顶部/中央/底部具有自举3行。引导3个具有相同高度并垂直对齐的列。
    最新问题
    © www.soinside.com 2019 - 2024. All rights reserved.