Question

I have a set of elements inside a parent element. The parent element’s height can change (it will be changed by some jQuery files). Here is how the layout looks:

 <div class = "parent">
     <div class="child1">
     </div>
     <div class="child2">
     </div> 
 </div>

I want the child elements to end up aligned at the middle of the parent div, but i can’t figure out how to write the css to do so. I have tried writing things like:

 .child1 {
        ...
       vertical-align: middle;
 }

Which doesn’t work. I have also tried:

 .parent {
       display:table;
 }
 .child1 {
       display:table-cell;
       vertical-align:middle;
 }

This also doesn’t work. Any ideas how to do this?

Answer 1

Check this link : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

this will bring your child div’s top to 50% of the container. just add margin-top: -(x)px; where (x) is half of your child div’s height.