How to center a div vertically?

Question

I have a div that I want to center horizontally and vertically.

For the horizontal issue everything is great, but I have a problem with the vertical alignment.

I tried this:

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

but this doesn't work.

check my answer to see if it works for you.. @ra_htial .... yeah ages old question, but still a tricky one that should be clarified — juanm55, Jul 16 '12 at 15:44
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Martin Tournoij, Jul 30 '15 at 15:09

alex · Accepted Answer · 2014-11-04T23:01:33.880

41

If you only have to support browsers that support transform (or its vendor prefixed versions), use this one weird old trick to vertically align elements.

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

If you have to support older browsers, you can use a combination of these, but they can be a pain due to the differences in rendering block vs table.

#parent {
    display: table;
}

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

If your height is fixed and you need to support those really old, pesky browsers...

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

If your height is not fixed, there is a workaround.

See it on jsFiddle.

edited Nov 04 '14 at 23:01

answered Dec 11 '10 at 09:55

alex

479,566
201
878
984

thanks a lot my friend but that only work if i know what is the #child height ... but it's not always the same, thumb UP !! thanks for your useful answer!! – trrrrrrm Dec 11 '10 at 15:37
@From.ME.to.YOU See the [workaround](http://www.jakpsatweb.cz/css/css-vertical-center-solution.html). Unfortunately, IE6+7 make the extra containers necessary. – alex Dec 11 '10 at 15:40

score 3 · Answer 2 · edited Apr 21 '14 at 23:12

3

Having the parent property as, display:table and child property as display: table-cell and vertical-align: middle worked for me.

edited Apr 21 '14 at 23:12

Arian Faurtosh

17,987
21
77
115

answered Apr 21 '14 at 22:48

Abdullah Aman

1,314
11
11

bpardo · Answer 3 · 2021-05-26T11:00:03.833

You can use flexbox to center horizontally or vertically your child div inside a parent div:

This should be your html:

<div id="parent">
   <div id="child">
      info
   </div>
</div>

And this is the css with flexbox:

#parent{
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 100%;
   height: 100vh;
   background: lightgray;
}
#child{
   position: relative;
   background: black;
   padding: 2rem;
   color: white;
   box-shadow: 5px 5px 20px rgba(0,0,0,.4);
   border-radius: 5px;
}

Here is de codepen: https://codepen.io/bongardabo/pen/YzZQgaJ

juanm55 · Answer 4 · 2015-08-24T23:13:22.247

0

here is another way when you don't know the inner div size or whatever, you may use % here and there to fix the "centering" ....

the idea is that your top value is half the height of your child element as to create the centering illusion

Here's the code:

<div id="parent">
    <div id="child">
            hello
    </div>
</div>

and for the styling:

#parent {
   position: relative;
    height: 300px;
    width:200px;
    background-color:green;
}

#child {
   height: 50%;
   width: 50%;
    position:relative;
    top:25%;
    left:25%;
   background-color:red;
}

Here you can see it in action http://jsfiddle.net/Wabxv/

edited Aug 24 '15 at 23:13

answered Jul 16 '12 at 15:41

juanm55

1,679
1
12
9

note that this will center the div in the available space that is remaining for it (if parent div has some text, this way will center in the remaining space, not the whole parent item size... for that use absolute positioning) – juanm55 Jul 16 '12 at 15:46

score 0 · Answer 5 · answered Dec 11 '10 at 16:42

First off, treating non-table markup as tables (with display:table and friends) isn't cross-browser. I don't know which browsers you need to support but certainly IE6 won't do this. But, if your targeted browser do all support display:table I can give you some tips.

The vertical centering approach you're looking for (using table layout) depends on having a TD with vertical-align:middle, then inside of that a single block element will vertically center. So I think what you want is:

#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }

It's ok to use table-cell with no surrounding table-row and table, the browser infers the needed table wrapping elements for you.

How to center a div vertically?

5 Answers5

Linked