How do I vertically center align a position:relative element

Question

I am trying out some basic CSS today and I stumbled across a problem. I hope somebody could help me with it.

How do I vertically center align the parent container to the canvas which has a position:relative to it? The parent container has a child element with position:absolute to it. The child element has been positioned to the center of the parent container.

I have created a JSFiddle for this. http://jsfiddle.net/exmRf/

Cheers, Venn.

Answer 1

One solution is to wrap your .container with two wrappers; give the first one display: table; and height: 100%; width: 100%; and the second display: table-cell; and vertical-align: middle;. Also make sure your body and html have full height.

Here's a little working demo: little link.

Another method is to apply top: 50%; to your .container and margin-top: -150px; (300px / 2 = 150px). (Note that this method requires you to know the exact height of your container, so it might not be exactly what you want, but it might as well be!). A little working demo of this latter method: another little link.

I hope that helped!