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
Submitted by Hyman on Wednesday, June 29, 2022 - 23:35
I used things to do in huntersville nc this weekend ( Eula - http://mailanylabportal.com/__media__/js/netsoltrademark.php?d=www.smart... ) be recommended this web site by my cousin. I'm not sure whether or not this submit is written by means of him as nobody else realize such specified approximately my trouble. You are incredible! Thanks!
Submitted by Jxedcenethoge on Saturday, August 13, 2022 - 23:41
brand cialis tadalafil daily dose tadalafil combitic https://ciallsed.com/
Submitted by Ewbbrove on Friday, September 02, 2022 - 09:38
when does cialis go off patent cialis paypal cialis vs viagra cost

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.