How do I vertically center align a position:relative element?

Question

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>

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!

Comments

[Vennsoh]

Wow, thanks! It works, just curious, is that the only way to do this? Is this the most elegant way? I am looking for a solution that works in modern browsers. So outdated browsers don't matter to me.

[Vennsoh]

Thanks! I never knew why body needs to have height: 100% in order for this to work? Any quick answers?

[Chris]

@Vennsoh Because if you don't specify height: 100% to body, it will only be large enough to fit the elements, not the full screen. And you want your container to be centered within the full screen, so you need body to cover it all.