How do I vertically center align a position:relative element?
alignment, center, css, css-position
Solution
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!
Problem
How do I vertically center align the parent container to the canvas which has `position:relative`? The parent container has a child element with `position:absolute`. The child element has been positioned in the center of the parent container. Here's a snippet: ``` .container { position: relative; width: 300px; height: 300px; background-color: red; margin: auto; } .item { position: absolute; width: 100px; height: 100px; background-color: blue; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } ``` ``` <div class="container"> <div class="item"></div> </div> ```