Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

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?
by

3 Answers

akshay1995
Another way of achieving this horizontal and vertical centering is:

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
pankajshivnani123
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.
RoliMishra
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>

Login / Signup to Answer the Question.