By Burak Erdem


2008-12-28 12:57:16 8 Comments

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.

<body>
    <div>Div to be aligned vertically</div>
</body>

How can I center a div vertically in all major browsers, including Internet Explorer 6?

30 comments

@G-Cyr 2015-03-13 19:42:58

To vertical-align a box in web page, including Internet Explorer 6, you may use:

  1. Conditional comments
  2. The haslayout property
  3. display: table-value for others (and now flex)

Fiddle

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}
<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

Actually, Internet Explorer 7 would bring some trouble here being the only which will strictly apply height: 100% on HTML/body elements.


But, this is past and today and who still minds old versions of Internet Explorer, table/table-cell is just fine, display: flex is promising, and display: grid will show up some day.


Another nowdays example via flex

html {
  display: flex;
  min-height: 100vh;/* or height */
}

body {
  margin: auto;
}
<div>Div to be aligned vertically</div>

@G-Cyr 2016-03-27 12:17:29

downvote on the simpliest and oldiest way to do it without needs of size nor taking elements of the flow ?

@vir us 2019-11-24 20:27:03

Since each time I need to center div vertically I google for it over and over again and this answer always comes first I'll leave this for future me (since none of the provided solutions fit my need well):

So if one is already using bootstrap this can be done as below:

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

@Deepu Reghunath 2019-06-28 10:11:51

Using flex property of CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

or by using display: flex; and margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}
<div class="parent">
    <div class="child"></div>
</div>

show text center

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Using percentage(%) height and width.

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div> 

@Varsha Dhadge 2018-03-07 06:11:27

The easiest solution is below:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

@baburao 2018-04-21 12:43:48

Indeed the easiest one yet :) Although, I had to set the styles to a outer-div, instead of body.

@Usman Iqbal 2019-06-20 06:25:09

For new comers please try

display: flex;
align-items: center;
justify-content: center;

@Heretic Monkey 2019-06-27 21:42:11

Please add a Stack Snippet showing how this CSS code vertically aligns a div.

@idrisadetunmbi 2019-06-28 10:09:26

this works too <div style="display:flex"><div style="margin:auto">Inner</div></div>

@Usman Iqbal 2019-06-28 10:13:26

I came across with this wonderful explanation of align items and justify content. Must Read : stackoverflow.com/questions/42613359/…

@DrupalFever 2014-12-17 18:30:23

The simplest way would be the following 3 lines of CSS:

1) position: relative;

2) top: 50%;

3) transform: translateY(-50%);

Following is an EXAMPLE:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

@Bart Burg 2015-08-14 09:10:39

note: doesn't work correct if the height of the outer div is set with "min-height: 170px"

@ripper234 2016-11-12 19:48:51

Interferes with z-index

@kolobok 2016-12-09 13:35:59

Doesn't work if content has float.

@Arch Linux Tux 2018-04-13 08:01:11

doesn't work when height of outer div is 100%. Then only works with position: absolute;.

@drmrbrewer 2018-10-23 11:02:03

I had found this solution elsewhere first, but extra kudos to this particular answer for mentioning the -webkit-transform variant in particular, which I needed to make this method work in phantomjs... ended hours of struggling so thank you!

@Nick Steele 2019-06-20 18:40:52

This is the best answer. This is incredibly simple, messes with the least amount of existing work and functions on everything as far back as IE9 which nobody even uses anymore. Lets get this guy some more upvotes!

@Giorgio Tempesta 2019-06-24 15:07:49

Definitely the best and "browser safe" approach!

@Melchia 2019-04-09 08:12:11

There is a trick I found out recently: You need to use top 50% & then you do a translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

@Andy Hoffman 2019-02-10 08:40:47

CSS Grid

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>

@Armel Larcier 2014-02-20 21:05:30

This is the simplest method I found and I use it all the time (jsFiddle demo here)

Thank Chris Coyier from CSS Tricks for this article.

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Support starts with IE8.

@Billbad 2011-05-31 03:13:13

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and working for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

@Billbad 2012-04-03 17:00:56

Without an "absolute" outer DIV, any content on the page before it will push the whole block down. This makes it more independent of other page content.

@gfaceless 2015-05-22 10:26:51

.outer {position:absolute;width:100%;height:100%} is not necessary, they are here simply for demonstrating. All we need is display:table, if anyone is confused as I was.

@user10089632 2017-11-09 18:59:58

I've noticed that this needs 99% to avoid scroll bars. More important, this works with only the first two divs, say keep .outer and middle and plainly ignore the .innerand its style. I don't know what is the point of margin-left, margin-right set to auto since that doesn't center the element horizontally??!!!

@rococo 2018-03-16 20:28:12

Removing width: 100%; and adding margin: 0 auto to .outer allows variable width as well.

@Michał Woliński 2018-11-16 13:16:00

@user10089632 No, it is not issue of width or height but position. top: 0; left 0; is missing, at least in Chrome which sets default to 1.

@Santosh Khalse 2016-12-15 13:08:17

Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>

@Sameera R. 2017-04-12 23:27:55

worked for me without height:100%; thanks

@Adrian 2017-09-04 15:33:00

If you've got a navbar, you can tweak the height using height: calc(100% - 55px) or whatever the height of your navbar is.

@Ben 2018-04-21 22:14:25

i also had to remove margins/padding from body

@Amir A. Shabani 2019-09-15 12:04:05

Works well with float. Thanks.

@Nine Magics 2019-10-29 13:34:01

Please note that this will potentially behave weird on "newer older" mobile safari browsers. The recommended use instead of height is flex-basis on the .container class

@John Slegers 2016-01-21 02:11:42

Centering only vertically

If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.

The outer container:

  • should have display: table;

The inner container:

  • should have display: table-cell;
  • should have vertical-align: middle;

The content box:

  • should have display: inline-block;

You can add any content you want to the content box without caring about its width or height!

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

See also this Fiddle!


Centering horizontally and vertically

If you want to center both horizontally and vertically, you also need the following.

The inner container:

  • should have text-align: center;

The content box:

  • should re-adjust the horizontal text-alignment to for example text-align: left; or text-align: right;, unless you want text to be centered

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

See also this Fiddle!

@Martin Wantke 2018-01-23 11:57:07

I think a solid solution for all browsers without using flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo: https://jsfiddle.net/6m640rpp/

@Sanjib Debnath 2016-09-27 05:53:55

I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

@Nathan K 2016-12-05 02:26:55

CSS transforms can cause distortions in text and borders (when the math results in fractional pixels).

@th3pirat3 2016-07-02 11:15:23

This method doesn't use any transform. So it doesn't have a problem with the output becoming blurry.

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

@damiano celent 2016-04-05 17:36:54

This is by far the easiest approach, works on non-blocking elements as well, the only downside is, it's Flexbox, thus, older browsers will not support this.

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

Link to codepen:

http://codepen.io/damianocel/pen/LNOdRp

The important point here is, for vertical centering, we need to define a parent element (container) and the img must have a smaller height than the parent element.

@Luca Borrione 2018-12-23 21:57:42

link broken .. please add the relevant css directly to the answer

@Ari 2015-12-23 17:09:11

The following is working in my case and was tested in Firefox.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

The div's height and parent's height are dynamic. I use it when there are other elements on the same parent which is higher than the target element, where both are positioned horizontally inline.

@MandarK 2015-09-18 09:08:52

The three lines of code using transform works practically on modern browsers and Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).

  1. 'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport position: relative

  2. Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding mozilla without inner paddings mozilla with paddings

@Fastboy619 2015-08-26 03:17:28

The best thing to do would be:

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 pixels because that's half of the div's height in this case.

@JLavoie 2015-03-26 01:25:59

Here is a simple way, with almost no code:

CSS code:

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML code:

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

Your text will be in the middle of the page!

@Anshul 2015-03-17 06:20:45

Just do it: Add the class at your div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

And read this article for an explanation. Note: Height is necessary.

@Ruwen 2014-07-04 09:03:27

The answer from Billbad only works with a fixed width of the .inner div. This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

@John Slegers 2016-01-21 19:24:27

Interesting! I'm using an almost identical technique! -> stackoverflow.com/questions/396145/…

@inaam husain 2015-02-10 09:59:38

By using the transform property we can do a vertically centered div easily.

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

See here for full article

@Rushabh RajeshKumar Padalia 2014-12-16 05:07:12

I just found another way which worked for me:

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

More information

@Ruwen 2014-11-20 09:28:36

Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.

It was tested in Chrome, Firefox, Opera, and Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

@Marwelln 2014-10-20 13:37:54

A modern way to center an element vertically would be to use flexbox.

You need a parent to decide the height and a child to center.

The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

@Rantiev 2014-07-21 09:00:17

I use this. It works in Internet Explorer 8 and later:

height:268px - for display:table acts like min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

@bravedick 2014-05-15 15:25:42

If someone cares for Internet Explorer 10 (and later) only, use flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Flexbox support: http://caniuse.com/flexbox

@André Fiedler 2014-11-06 13:42:02

Android < 4.4 doesn't support align-items: center; !

@t.mikael.d 2015-06-02 12:51:46

Actually, it does support align-items: center; caniuse.com/#search=align-items

@Nathan Osman 2015-08-23 01:37:02

@t.mikael.d You might want to take a closer look at that table. For Android < 4.4, it states "Only supports the old flexbox specification and does not support wrapping."

@Moes 2013-08-13 04:06:03

To center the div on a page, check the fiddle link.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Another option is to use flex box, check the fiddle link.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Another option is to use a CSS 3 transform:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

@Ricardo Zea 2015-01-14 04:45:31

@ArmelLarcier That's incorrect. Relative units are percentages %, ems and rems. Absolute or fixed values are pixels or points. What you're referring to is "it only works with a declared height". Howevever, although this method described by Moes does require a height, when you declare it in relative units, percentage is the best, no matter how much content is inside the centered DIV that DIV will expand vertically to fit its content. That's the beauty of this method. The other good thing is that this method works in IE8/9/10 in case someone still needs to support those browsers.

@Armel Larcier 2015-01-14 20:23:27

@ricardozea I don't mean to play stubborn but saying the centered div will expand vertically while remaining vertically centered is wrong. Try it. I know when I say the height must be "fixed", that it's not the right word. It is indeed relative, to its parent. Anyway I think Chris Coyer's method makes more sense, see my answer stackoverflow.com/a/21919578/1491212 It's compatible with IE8 AND does work on an element with no specified dimensions.

@Ricardo Zea 2015-01-15 17:24:52

@ArmelLarcier It's all good. Is not wrong brother. Try it: codepen.io/shshaw/pen/gEiDt - Add paragraphs to the green box ;]. Granted, it uses Modernizr to accomplish the effect, but all in all it's doable. I saw your answer and the CSS-Tricks.com post as well, but that method doesn't make me happy, it uses extra markup and the CSS is too verbose. I think the best solution is either using flexbox or the transform: translate(-50%, -50%); technique. For IE8 I'd just leave it top/center aligned and move on.

@Armel Larcier 2015-01-15 17:50:07

@ricardozea Well the codepen you linked to uses the "display: table" method and extra markup so I'm not surprised. Anyways, +1 to your last sentence.

@Yisela 2013-08-13 03:08:30

One more I can't see on the list:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
  • Responsive with percentages and min-/max-
  • Centered regardless of padding (without box-sizing!)
  • height must be declared (see Variable Height)
  • Recommended setting overflow: auto to prevent content spillover (see Overflow)

Source: Absolute Horizontal And Vertical Centering In CSS

@Ryan Knell 2014-05-09 00:11:27

This worked for me, but I needed to have a fixed width and height in chrome for some reason

@GFoley83 2014-05-14 01:33:14

Thank you. I needed a fix where I didn't need to calculate px height or width and this worked perfectly.

@Luca Steeb 2015-07-22 08:24:52

Great solution, especially because you don't need a parent div

@Bart Burg 2015-08-14 09:06:00

This does a stretch if the height is not fixed, other than that: nice solution

@Charles L. 2015-11-07 20:29:35

If you have a width and height that are not 100%, use margin: auto;

@Loren Shqipognja 2017-08-22 20:15:46

Why does this fail when any of the parameters for position are not 0. For example if top is 30%.

@rtaft 2017-09-21 13:06:39

Strange, I tried this with a progress bar and it put it at the top of the page above my menu.

@user10089632 2017-11-09 19:19:16

@rtaft, if the update work check it out otherwise check the provided link for full css.

@user10089632 2017-11-09 19:25:29

@LucaSteeb, unless you set the position=relative for the body element, then yes you need a parent to set that to it.

Related Questions

Sponsored Content

28 Answered Questions

[SOLVED] How to Vertical align elements in a div?

103 Answered Questions

[SOLVED] How to horizontally center a <div>

44 Answered Questions

[SOLVED] How to disable text selection highlighting

13 Answered Questions

[SOLVED] Is the recommendation to include CSS before JavaScript invalid?

32 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1874185 View
  • 2027 Score
  • 32 Answer
  • Tags:   html css height

35 Answered Questions

[SOLVED] How to vertically align an image inside a div

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

21 Answered Questions

[SOLVED] Vertically align text next to an image?

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

38 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

Sponsored Content