垂直居中div中的div

Question

我想在div中垂直居中一个div。我的外部div是全屏，它覆盖整个屏幕。我的内部div在position:relative。

我的代码结构是：

<div class="fullscreen">
   <div class="fullscreen-centered">
       <p>...........</p>
   </div>
</div>

我的css代码是

.fullscreen-centered{
   position: relative;
   top: 50%;
   transform:translateY(-50%); 
 }

工作正常。但我也使用skrollr.js为内部div添加一些视差效果。这就是为什么当我使用data-top=transform:0px来使用效果时，会被上面的transform取代，所以它会失去它的居中位置。

另一个Hack可能是display:table-cell但它不起作用。 是否有其他方式而不是使用transform？

Answer 1

使用display: table(-cell)和vertical-align而不使用position: relative;和transform s。

<style>
    .fullscreen {background: #eee; width: 600px; height: 300px; display: table;} 
    .fullscreen-centered{display: table-cell; background: #ccc; vertical-align: middle;}
</style>

<div class="fullscreen">
    <div class="fullscreen-centered">
        <p>...........</p>
    </div>
</div>

http://jsfiddle.net/c6aw776c/