Question

这是我到目前为止：

我需要在.jumbotron-special容器内垂直居中。

我尝试在父元素上使用display: table;，然后在子元素（带有H1和H2的元素）上使用display:table-cell，但到目前为止没有运气，我已经没有想法了。我不想使用绝对定位，因为这需要响应，并且随着分辨率变小，布局误入歧途。

任何想法如何将它集中到jumbotron父div？

Answer 1

您可以使用以下代码div .jumbotron-special

的内容

将以下属性添加到class

display:flex;
 justify-content:center;
 align-items:center;

工作代码：JSFIDDLE

更多关于Flex Box

阅读有关Flex here

的更多信息

Answer 2

试试这个：

#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }

其中margin-top是height的负半部。

或者，另一种有效的方法有2个div：

<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>

margin-bottom height的{{1}}消极的一半：

 #controller-div    {float:left; height:50%; margin-bottom:-120px;}
 #your-div  {clear:both; height:240px; position:relative;}

Answer 3

这也适用（你只是错过了添加height:100%）

.container-text{
    color: #fff;
    text-shadow: #333 3px 3px;
    display: table;
    width: 100%;
    height: 100%;
}
.inner-container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Answer 4

这是另一个比flexbox更多支持的选项。

Updated Fiddle here

body{
    width: 100%;
    height: 100%;
}
.full-jumbotron{
    font-size: 10em !important;
    margin-top: -70px;
    height: 100vh;
    background: #333;
    min-height: 100%; 
    max-height: 100%;  
}
.container-text{
    color: #fff;
    text-shadow: #333 3px 3px;
    height: 100%;
    display: table;
    width:100%;
}
.inner-container {
    display: table-cell;
    vertical-align: middle;
    width:100%;
}

垂直居中div的内容

4 个答案: