percentage - 在没有固定高度的情况下保持行高在 div 中垂直居中

Question

我在一个使用标准网格系统的响应式网站上工作，所以我的 div 不能有固定的高度。话虽如此，我已经设置了一个 fiddle 文件来模拟我的问题。出于美观原因，我在桌面上的最小高度为 50px，并将行高也设置为 50。因此文本在 div 中垂直居中。如果你让窗口更窄，那条线当然最终会断掉。有没有办法在内容中断后保持垂直居中，这样看起来确实很糟糕？

部分代码如下:

.box {
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

这是 fiddle 文件:http://jsfiddle.net/HFAew/

Answer 1

你不能在 CSS 中垂直居中，但你有一些针对不同情况的解决方法。在你的情况下，我建议使用 display: table;在 wrapper 中:http://jsfiddle.net/HFAew/1/

<div class="verticalCentered">
    <div class="box"> test content test content test content test content</div>
</div>

CSS:

.verticalCentered {
    display: table;
    height: 100px; /*variable*/
    width: 100%;
}

.box {
    display: table-cell; /**/
    vertical-align: middle; /**/
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    background-color: #000;
    text-align: center;
}

但请记住它有时会出现问题。它仅在某些情况下有用。其他方式:http://www.vanseodesign.com/css/vertical-centering/