[html] Vertically centering a div inside another div

I want to center a div which is added 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 values for 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 align middle?

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.

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)

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_x000D_
{_x000D_
display:table;_x000D_
height:80px;_x000D_
background-color:#555;_x000D_
}_x000D_
_x000D_
.inner_x000D_
{_x000D_
display:table-cell;_x000D_
vertical-align:middle;_x000D_
color:#FFF;_x000D_
padding-left:10px;_x000D_
padding-right:10px;_x000D_
}

<div class="cn">_x000D_
  <div class="inner">Item 1</div>_x000D_
  <div class="inner">Item 2</div>_x000D_
</div>

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!

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

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>

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 {_x000D_
  display: table-cell;_x000D_
  vertical-align: middle;_x000D_
  text-align: center;_x000D_
  width: 400px;_x000D_
  height: 300px;_x000D_
  border: 1px solid #555;_x000D_
}_x000D_
_x000D_
.container {_x000D_
  display: inline-block;_x000D_
  text-align: left;_x000D_
  padding: 20px;_x000D_
  border: 1px solid #cd0000;_x000D_
}

<div class="wrapper">_x000D_
  <div class="container">_x000D_
    Center align a div using "<strong>display: table-cell</strong>"_x000D_
  </div>_x000D_
</div>

Using flex-box (display: flex)

.wrapper {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
  width: 400px;_x000D_
  height: 300px;_x000D_
  border: 1px solid #555;_x000D_
}_x000D_
_x000D_
.container {_x000D_
  align-self: center;_x000D_
  padding: 20px;_x000D_
  border: 1px solid #cd0000;_x000D_
}

<div class="wrapper">_x000D_
    <div class="container">_x000D_
        Centering a div using "<strong>display: flex</strong>"_x000D_
    </div>_x000D_
</div>

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

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 {_x000D_
    position: relative;_x000D_
    width: 200px;_x000D_
    height: 200px;_x000D_
    background: gray;_x000D_
    text-align: center;_x000D_
}_x000D_
_x000D_
div.inner {_x000D_
    position: absolute;_x000D_
    top: 50%;_x000D_
    left: 50%;_x000D_
    width: 100px;_x000D_
    height: 100px;_x000D_
    -webkit-transform: translate(-50%, -50%);  _x000D_
    transform: translate(-50%, -50%);   _x000D_
    background: red;_x000D_
  _x000D_
}

<div class="cn">_x000D_
    <div class="inner">_x000D_
        test_x000D_
    </div>_x000D_
</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?

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

<div id="outerDiv">_x000D_
<div id="innerDiv">Inner Div_x000D_
</div>_x000D_
</div>

you can do it by simply adding css style mentioned above. All the best. For any query please comment

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>

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.

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

Here the code:

.outer {_x000D_
  position: relative;_x000D_
  text-align: center;_x000D_
  width: 100%;_x000D_
  height: 150px; // Any height is allowed, also in %._x000D_
  background: gray;_x000D_
}_x000D_
_x000D_
.outer > div:first-child {_x000D_
  position: absolute;_x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  width: 100%;_x000D_
  -webkit-transform: translate(-50%, -50%);_x000D_
  -ms-transform: translate(-50%, -50%);_x000D_
  transform: translate(-50%, -50%);_x000D_
  background: red;_x000D_
}

<div class="outer">_x000D_
  <div class="inner">_x000D_
    Put here your text or div content!_x000D_
  </div>_x000D_
</div>

try to align inner element like this:

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

and of course:

position: absolute;

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/

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

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>

To center align both vertically and horizontally:

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

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

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:

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

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.

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>

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>

Vertically centering a div inside another div

#outerDiv{_x000D_
  width: 500px;_x000D_
  height: 500px;_x000D_
  position:relative;_x000D_
  _x000D_
  background-color: lightgrey;  _x000D_
}_x000D_
_x000D_
#innerDiv{_x000D_
  width: 284px;_x000D_
  height: 290px;_x000D_
  _x000D_
  position: absolute;_x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  transform: translate(-50%, -50%);_x000D_
  -ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ _x000D_
  _x000D_
  background-color: grey;_x000D_
}

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