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.
One solution is to wrap your
.container
with two wrappers; give the first onedisplay: table;
andheight: 100%; width: 100%;
and the seconddisplay: table-cell;
andvertical-align: middle;
. Also make sure yourbody
andhtml
have full height.Here's a little working demo: little link.
Another method is to apply
top: 50%;
to your.container
andmargin-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!