保持线高度垂直居中div没有固定高度

Question

我正在使用标准网格系统的响应网站，所以我的div不能有一个固定的高度。有了这说，我已经安装了一个小提琴文件模拟我的问题。我在桌面上有一个50像素的高分辨率，并将行高设置为50.因此文本垂直居中在div中。如果你让窗口更窄，这条线最终将会打破。有没有一种方法可以保持内容在中断后保持垂直居中，因此看起来很糟糕？

这里是一些代码：

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

这里是小提琴文件：http://jsfiddle.net/HFAew/

Answer 1

不能在CSS verticaly中心，但你有不同的情况下，一些解决方法。在你的情况下，我建议使用display：table;在一个包装：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/