Vertically centering a div inside another div

Question

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?

Answer 1

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

Answer 2

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)

Answer 3

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?

Answer 4

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.

Answer 5

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.

Answer 6

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>

Answer 7

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;
}

Answer 8

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.

Answer 9

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>

Answer 10

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>

Answer 11

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>

Answer 12

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>

Answer 13

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>

Answer 14

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;
    }

Answer 15

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>

Answer 16

try to align inner element like this:

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

and of course:

position: absolute;

Answer 17

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>

Answer 18

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/

Answer 19

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>

Answer 20

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:

Answer 21

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.

Answer 22

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!

Answer 23

To center align both vertically and horizontally:

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

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

Answer 24

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;
}