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

我正在寻找一种方法，在jumbotron内垂直中心container 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>

1068443 次浏览
小开
最佳答案

柔性箱方式

通过使用灵活的箱体布局， 垂直对齐现在变得非常简单。现在，除了Internet Explorer 8 &9. 因此，我们需要在IE8/9中使用一些hacks/polyfills或不同的方法。

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

注意:最好使用一个额外的类，而不是改变.jumbotron来实现垂直对齐。我将使用vertical-center类名作为实例。

(A < A href="http://jsbin.com/namogi/1/edit?css,output" rel="noreferrer">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;
}

重要的注释(在演示中考虑):

  1. height或min-height属性的percentage值相对于父元素的height，因此你应该显式地指定父元素的height。

  2. 供应商前缀/旧的flexbox语法在发布的片段中被省略了，但在在线示例中存在。

  3. 在一些旧的web浏览器中，如Firefox 9 (我在其中进行了测试)，伸缩容器-在本例中为.vertical-center -不会占用父容器内的可用空间，因此我们需要指定width属性，如:width: 100%。

    4. 同样在上面提到的一些浏览器中，伸缩项——在本例中为.container——可能不会水平地出现在中心位置。似乎应用auto的左/右margin对伸缩项没有任何影响 因此我们需要通过box-pack / justify-content来对齐它。

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

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

这是我在回答这个问题时写的旧答案。这个方法已经讨论过18516474 < a href = " https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474 " > < / >在这里，它应该也适用于Internet Explorer 8和9。我简单解释一下:

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

< p > 中间 < br > 将方框的垂直中点与父方框的基线加上父方框x-height的一半对齐

在父元素——本例中的.vertical-center元素——具有显式height的情况下，如果我们可以有一个与父元素具有完全相同的height的子元素，那么我们就可以将移动父对象的基线放到全高子元素的中点，并出人意料地使我们想要的流中子元素——.container——垂直对齐到中心。

聚在一起

也就是说，我们可以通过::before或::after伪元素在.vertical-center中创建一个全高元素，并将其默认的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部分，最好适当地放置元素(__ABC2 absolute ?由你决定。)，并添加一个更高的z-index值(为了保证)，以使它们始终位于其他元素的顶部。

小开

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

小开

我喜欢的技巧是:

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>

另见< >强这个小提琴< / >强!

小开

更新2021

引导5仍然使用flexbox，因此垂直居中的方法与Bootstrap 4相同…

引导4使用flexbox，因此垂直居中的方法要容易得多。

只要使用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>
参见:https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
小开

在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/上找到

小开

在Bootstrap 4:

到将子元素水平居中，使用bootstrap-4类:

justify-content-center

到将子元素垂直居中，使用bootstrap-4类:

 align-items-center

但是记住不要忘记使用< em > d-flex < / em >类 这是一个bootstrap-4实用类，比如

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>

注意:确保添加bootstrap-4实用程序，如果这段代码不工作

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

小开

bootstrap4垂直中心的几个项目

d-flex用于伸缩规则

flex-column用于项目的垂直方向

justify-content-center用于居中

风格=“高度:300 px;”必须为设定点，其中center为calc或使用h - 100类

然后对于水平中心div d-flex justify-content-center 和某个容器

所以我们有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>
小开

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

小开

给出容器类

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

给出容器内部的div:

align-content: center;

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

小开

与引导带4垂直对齐中心

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

例子

如果你有这个:

<div class="col-3">

改成这样:

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

提交答案