Vertically centering multiple div's in its parent div - html

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

You can create a wrapper for the elements you wish to center inside a container that gets centered instead like so:
HTML
<div class ="parent">
<div class="centerme">
<div class="child1">
....
</div>
<div class="child2">
....
</div>
</div>
</div>
Then you can simply do this:
CSS
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Demo. Method found over at CSS-tricks.

Answer 2

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.

Answer 3

You have forgotten to apply the same styling on child2 as on child1, like so:
.child1, .child2 {
display:table-cell;
vertical-align:middle;
}
Here is a jsfiddle: http://jsfiddle.net/D853q/1/

Answer 4

This is slightly more complicated than your standard "how do I vertically align a single div inside a parent container."
If you have a multiple number (which can change) of child elements that need to be aligned vertically or if your parent container's height changes, then you will need to use Javsacript/JQuery to set the position as there is no "standard" way to apply a middle vertical alignment to multiple child elements inside a parent container utilizing just CSS.
EDIT: I've been proven wrong, you can apparently with using :before pseudo-element, but it won't work in IE7 unless you hack around it.
I've implemented this in a fiddle: http://jsfiddle.net/rJJah/20/
Key parts
Each Child element has a position:relative. This is important because certain child elements may have variable height, and this eliminates the need to calculate the top position separately for each.
Everytime you change the height of the parent container, you will need to rerun the height calculations and setting the top offset to each child.