vertically centering a div in a div

Question

I want to vertically center a div in a div.My outer div is fullscreen it covers the whole screen.And my inner div is in position:relative .

My codes structure is :

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

My css codes are

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

It works fine . But Im also using skrollr.js to add some parallax effect to inner div . That's why when i use data-top=transform:0px in order to use a effect , this is replaced by above transform so it loses its centered position.

Another Hack can be display:table-cell but it does not working. Is there another way rather than using transform ?

Answer 1

Use display: table(-cell) and vertical-align without position: relative; and 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/

Answer 2

Since the parallax effect is created using 3D transforms, translating an element along the Z axis has a side effect - its effective size changes as we move it closer to or farther away from the viewport. To counter this we need to apply a scale() transform to the element so that it appears to be rendered at its original size:

transform: translateZ(-1px) scale(2);

It Might help you..!!