653

I want to center a div which is inside another div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

This is the CSS I am currently using.

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

As you can see, the approach I use now depends on the width and height of #innerDiv. If the width/height changes, I will have to modify the margin-top and margin-left values. Is there any generic solution that I can use to center the #innerDiv independently of its size?

I figured out that using margin: auto can horizontally align the #innerDiv to the middle. But what about vertical alignment?

4
  • what if you do margin-top: auto; margin-bottom: auto; Mar 14, 2013 at 13:43
  • 1
    jsfiddle.net/k6ShD/4 Mar 7, 2014 at 9:09
  • Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): stackoverflow.com/a/31977476/3597276 Aug 20, 2015 at 14:43
  • Suggestion given by others are right. Just to add. If u have parent div called DivParent and child div called ChildDiv, then Just add margin: auto to child div, this will make childDiv or innerDiv in center to ParentDiv. May 5, 2019 at 7:05

24 Answers 24

953

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example


Tested in:

  • FF3.5+
  • FF4+
  • Safari 5+
  • Chrome 11+
  • IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo


♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities: Compare all the methods on one pages

26
  • 1
    +1 Would the OP need to wrap any text inside another container if centered text was not desired?
    – andyb
    Jun 27, 2011 at 8:37
  • 272
    Whilst this does work it serves as a clean example of why CSS is just so greatly flawed. Something as simple as this should not need cludges and work arounds.
    – Andrew S
    Apr 11, 2013 at 21:43
  • 7
    How important is it to include display: table; in the parent element? Oct 29, 2013 at 3:52
  • 1
    Yes, your example is correct. I was talking about the code in your answer (here). You seem to have "position:flex", which doesn't appear to be a valid css attribute.
    – CpnCrunch
    Oct 2, 2015 at 16:24
  • 5
    This answer ended my frustration after 3 hours of fiddling and trying to get to show that div vertically aligned. That flex example worked perfectly, and since the customer uses IE11/Chrome, I can use it without a problem. Thanks so much! Nov 4, 2015 at 13:15
130

Another way of achieving this horizontal and vertical centering is:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(Reference)

6
  • 1
    +1, but it curiously depends on the order of positions. Starting bottom: 0; left: 0; gets the inner div stuck on the bottom of the parent (Chrome 33, anyways).
    – Patrick M
    Apr 6, 2014 at 16:58
  • define 0 in the orientation that you want your div to get aligned in my case, in a search form fiel it was .search-header{ margin:auto; top:0px; bottom:0px; right:0px; } no 'left' asigned to continue the order and position of the previous <div>
    – UrielUVD
    Jul 24, 2014 at 15:42
  • And no need to precise that the parent div must be positioned Jan 10, 2015 at 12:09
  • 9
    I would say this was the superior solution, but only when your inner element’s height can be specified in advance. This makes it unsuitable for vertically centring flowed text, for example.
    – Benji XVI
    Jan 27, 2015 at 14:49
  • Didn't work for left, always aligned to the left (OS/X Chrome 66.0.3359.117)
    – lilalinux
    May 6, 2018 at 17:03
52

Another way is using Transform Translate

Outer Div must set its position to relative or fixed, and the Inner Div must set its position to absolute, top and left to 50% and apply a transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Tested in:

  • Opera 24.0 (minimum 12.1)
  • Safari 5.1.7 (minimum 4 with -webkit- prefix)
  • Firefox 31.0 (minimum 3.6 with -moz- prefix, from 16 without prefix)
  • Chrome 36 (minimum 11 with -webkit- prefix, from 36 without prefix)
  • IE 11, 10 (minimum 9 with -ms- prefix, from 10 without prefix)
  • More browsers, Can I Use?
3
  • 8
    The best part of this code is it works perfect with full-width outer div. Great Job!
    – Nizam Kazi
    Oct 31, 2014 at 13:41
  • I know that we need to use transform: translate(-50%, -50%); to really center the div, but why top:50% and left:50% alone doesn't work? can someone explain this more? Jun 14, 2020 at 7:38
  • 1
    @KevinChandra, I think top and left refers to the container dimensions and the translate refers to the content size. hope that helps! Jun 15, 2020 at 1:04
51

Vertical Align Anything with just 3 lines of CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Simplest

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

According to shouldiprefix this are the only prefixes you need

You can also use % as the value for the 'height' property of .parent-of-element, as long as parent of element has height or some content that expands its vertical size.

3
  • 1
    can't tell you why, but in my case this worked perfectly when i used (50%) instead of (-50%) on translateY...
    – jumps4fun
    Apr 13, 2015 at 11:50
  • 4
    I love this solution for its elegance. The only problem is that if the user squashes their browser to 100px high (for example), I lose the top of the centered <div>, which is problematic for me because I want my header there for aesthetic/design reasons. To be perfectly honest, though: I like this solution so much, I'm not even sure I care! Jun 3, 2015 at 3:57
  • 1
    KjetilNordin, depending on your layout it sometimes work when you use 50% instead of -50%. But as long as the container of the centered element has a height, the -50% will work flawlessly.
    – epicrato
    Jun 4, 2015 at 22:26
22

Instead of tying myself in a knot with hard-to-write and hard-to-maintain CSS (that also needs careful cross-browser validation!) I find it far better to give up on CSS and use instead wonderfully simple HTML 1.0:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

This accomplishes everything the original poster wanted, and is robust and maintainable.

11
  • 11
    Most people do not consider this to be a good practice, and I agree. Markup elemets like "table" should not be used for layout. Use table if you are actually displaying a tabular data. Feb 9, 2014 at 11:19
  • 8
    If you value style over maintainable code, then your concern is valid. Other people may weigh those two factors differently, and they should see all options. Feb 14, 2014 at 19:43
  • 3
    i think this solution is great absolutely cross-browser
    – Geomorillo
    Mar 19, 2014 at 14:03
  • 10
    Despite the CSS nazis and their hatred for tables, I find this solution far better than piling up cryptic CSS directives which rely on a table-cell format anyway. CSS in its current state simply can't handle this properly.
    – kuroi neko
    Apr 15, 2014 at 8:46
  • 5
    One vote for implying that css is piling up a bunch of workarounds (at least in terminology) to achieve this simple thing. For a developer this definitely a more manageable solution, which I would hope it will not be needed in the future.
    – gkakas
    May 9, 2014 at 9:10
14

You can do it by simply adding css style mentioned below. This is supported by most of the browsers. You can check here for the browser support. All the best. For any query please comment

#outerDiv {
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

#innerDiv {
        background:cyan;
        width: 284px;
        height: 290px;
    }
<div id="outerDiv">
    <div id="innerDiv">
        Inner Div
    </div>
</div>

0
6

I personally prefer the trick of using a hidden pseudo element to span the full height of the outer container, and vertically aligning it with the other content. Chris Coyier has a nice article on the technique. http://css-tricks.com/centering-in-the-unknown/ The huge advantage of this is scalability. You don't have to know the height of the content or worry about it growing/shrinking. This solution scales :).

Here's a fiddle with all the CSS you'll need and a working example. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
1
  • 6 years later, this is the best solution! Jan 17, 2021 at 23:46
5

If you still didn't understand after reading the marvellous answers given above.

Here are two simple examples of how you can achieve it.

Using display: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Using flex-box (display: flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Note: Check the browser compatibility of display: table-cell and flex before using the above mentioned implementations.

4

Vertically centering div items inside another div

Just set the container to display:table and then the inner items to display:table-cell. Set a height on the container, and then set vertical-align:middle on the inner items. This has broad compatibility back as far as the days of IE9.

Just note that the vertical alignment will depend on the height of the parent container.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

3

When your height is not set (auto); you can give inner div some padding (top and bottom) to make it vertically center:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
3

Vertically centering a div inside another div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

2

I have been using the following solution since over a year, it works with IE 7 and 8 as well.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2

This works for me. Width and hight of the outer div can be defined.

Here the code:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

2

Fiddle Link < http://jsfiddle.net/dGHFV/2515/>

Try this

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
1

for innerdiv which do not specify it's height value,there is no pure css solution to make it vertically centered.a javascript solution could be get the innerdiv's offsetHeight,then calculate the style.marginTop.

1

You can do this with a simple javascript (jQuery) block.

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1

try to align inner element like this:

top: 0;
bottom: 0;
margin: auto;
display: table;

and of course:

position: absolute;
1
  • it's vertically not horizontally Aug 31, 2016 at 23:14
1

You can center the div vertically and horizontally in CSS using flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

And the second one is as following;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

And the resulting HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
1

enter image description here 100% it works

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

1
  • this works great
    – Sentry.co
    Feb 9, 2021 at 18:40
1

I would like to show another cross-browser way which can solve this question using CSS3 calc().

We can use the calc() function to control the margin-top property of the child div when it's positioned absolute relative to the parent div.

The main advantage using calc() is that the parent element height can be changed at anytime and the child div will always be aligned to the middle.

The margin-top calculation is made dynamically (by css and not by a script and it's a very big advantage).

Check out this LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

Output:

enter image description here

1

This will work way back to IE6!

<!DOCTYPE html> is required on IE6 too! [ will force IE6 default strict mode as well ].

( of course, the box coloring is for demo purposes only )

#outer{
        width: 180px;
        height: 180px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: center;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        display: inline-block;
        padding: .3em;
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,110,255,.7)}
<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

0
0

text align-center on parent element, display inline-block on child element. This will center all most anything. I believe its call a "block float".

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

This is also a good alternative for float's, good luck!

1
  • 1
    your answer is related to horizontal centering; the question is about centering vertically
    – apurkrt
    Mar 21, 2015 at 22:14
0

To center align both vertically and horizontally:

#parentDiv{
    display:table;
    text-align:center;
}

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

I know that question was created year ago... Anyway thanks CSS3 you can easily vertically aligns div in div (example there http://jsfiddle.net/mcSfe/98/)

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 
2
  • 4
    This does not seem to work in Safari.
    – sho
    Mar 12, 2013 at 16:48
  • 16
    This will only work in browsers using the Mozilla framework (such as Firefox). It's bad practice to provide/use code that isn't cross-browser friendly.
    – Jack B
    May 31, 2013 at 23:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.