CSS: Center div with dynamic height

Published by Lennart Van Vaerenbergh on October 13, 2016

Many solutions out there, but this one did exactly what I needed. Centering a div with a variable (hence unknown) height vertically and horizontally.

HTML structure.
<div id="page">
  <div id="content_container">
    <p>your content</p>
  </div>
</div>

CSS.
#page{
  display:table;
  height:100%;
  overflow:hidden;
  margin:0px auto;
}

#content_container{
  display:table-cell;
  vertical-align: middle;
}

The original source of this solution contains a couple of IE fallbacks, when needed.

Source: https://css-tricks.com/snippets/css/center-div-with-dynamic-height

Comments

Submitted by Anonymous on Friday, December 09, 2016 - 14:36

Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
CAPTCHA
This challenge is for testing whether or not you are a human visitor and to prevent automated spam submissions.