如何垂直中心在引导容器?

我正在寻找一种方法，垂直中心容器div在大屏幕内，并将其设置在页面的中间。

.jumbotron必须适应屏幕的全部高度和宽度。.container div的宽度为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>

当前回答

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

我知道这不是这个问题的直接答案，但它可能会帮助到一些人

2018-02-02 11:44:46

其他回答

柔性箱方式

通过使用灵活的盒子布局，垂直对齐现在非常简单。现在，除了Internet Explorer 8和9之外，许多web浏览器都支持这种方法。因此，对于IE8/9，我们需要使用一些hack /腻子或不同的方法。

在下面，我将向您展示如何在3行文本中做到这一点(不管旧的flexbox语法)。

注意:最好使用一个额外的类，而不是改变.jumbotron来实现垂直对齐。例如，我会使用垂直中心的类名。

示例(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;
}

重要注意事项(在演示中考虑):

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. Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example. 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%. 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.

如欲了解更多详情及/或列的垂直对齐方式，请参阅以下主题:

垂直对齐引导3

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

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

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

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

在父元素(本例中为.vertical-center元素)具有显式高度的情况下，如果我们可以有一个子元素具有与父元素完全相同的高度，那么我们将能够将父元素的基线移动到全高子元素的中点，并令人惊讶地使我们想要的流子元素(.container)垂直对齐到中心。

聚在一起

也就是说，我们可以在.vertical-center中通过::在伪元素之前或::之后创建一个全高元素，并将其和另一个子元素。container的默认显示类型更改为内联块。

然后使用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，或者在需要时将其显示类型更改为none:

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

更新演示

还有一件事:

如果容器周围有页脚/页眉部分，最好正确地定位这些元素(相对的，绝对的?由你决定)，并添加一个更高的z指数值(为了保证)，以保持它们始终处于其他的顶部。

2014-03-05 11:43:39

如果你使用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将完成这项工作

2019-08-26 03:46:40

在IE, Firefox和Chrome中测试。

.parent-container { 位置:相对; 高度:100%; 宽度:100%; ｝ .child-container { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); ｝ < div class = "父容器”> < div class = "子容器”> < h2 > < / h2 >标题文本 < / span > < span >一些文本 < / div > < / div >

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

2017-07-20 15:26:49

更新2021

Bootstrap 5仍然使用flexbox，因此垂直定心的方法与Bootstrap 4相同…

Bootstrap 4使用flexbox，所以垂直居中的方法更容易，不需要额外的CSS。

只需使用d-flex和align-items-center实用程序类。

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://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>

Also see: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

2017-03-07 11:17:12

与引导带4垂直对齐中心

添加这个类:d-flex align-items-center到元素中

例子

如果你有这个:

<div class="col-3">

改成这样:

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

2021-02-12 09:13:13

如何垂直中心在引导容器?

推荐文章

最新文章

标签