如何垂直居中元素？

-6

这个问题也许之前被问过，但我的情况是某种特殊的。如何垂直居中元素？

我有两个div在另一个里面。两个divs高度都是未知的，但我可以告诉外部div的是它的最小高度。重点是 - 如果内部div小于外部，我希望较小的div在外部div内垂直居中。如果内部div大于外部div的最小高度，我想让内部div扩展外部div。

我想实现这一点，而不使用任何脚本。

这有可能吗？

示例代码：

<div id="outer" style="min-height:50px;"> 
    <div id="inner"> 
     Im here, I could be short, I could be long 
     and if I wrap - i could be tall 
    </div> 
</div>

来源

2015-09-26 spectre

是..现在你尝试过什么。堆栈溢出不是代码写入服务。 –

http://howtocenterincss.com/可能有用 –

不可能没有脚本。另请提供示例代码，以便我们看到并进行更改。 –

使用display: table，display: table-cell和vertical-align: middle。繁荣。

现场演示：

.outer { 
 
    display: table; 
 
    min-height: 70px; 
 
    background-color: #BBB; 
 
    margin: 10px; 
 
} 
 
.inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    Im here, I could be short, I could be long and if I wrap - i could be tall 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="inner"> 
 
    <p>Im here, I could be short, I could be long</p> 
 
    <p>and if I wrap - i could be tall</p> 
 
    <p>Im here, I could be short, I could be long</p> 
 
    <p>and if I wrap - i could be tall</p> 
 
    </div> 
 
</div>

来源

2015-09-26 20:49:11

-1

基本上，没有任何脚本（JS/jQuery的），这是不可能的。只有css，你不能说较小的div放在另一个里面并垂直对齐。

正如你在你的问题中所说的那样，关键字“if”解释了它自己。对于你想要的，你必须使用一些脚本代码。 Css只能声明元素的样式，而不是一个关于另一个的条件。

来源

2015-09-26 20:26:13

这是100％可能没有JS。请参阅这个问题的其他两个答案。 –

你可以使用flexbox来做到这一点。看看这个jsFiddle

#outer { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

Here是一个有用的指南了flexbox

来源

2015-09-26 20:47:52 Jackson

如何垂直居中元素？

回答

相关问题