The below style to the inner div will center it.
margin: 0 auto;
.outerdiv {
margin-left: auto;
margin-right: auto;
display: table;
}
Doesn't work in internet explorer 7... but who cares ?
Just add margin: 0 auto; to the inside div.
for detail info, let's say the code below will make a div aligned center:
margin-left: auto;
margin-right: auto;
or simply use:
margin: 0 auto;
but bear in mind, the above CSS code only works when you specify a fixed width (not 100%) on your html element. so the complete solution for your issue would be:
.your-inner-div {
margin: 0 auto;
width: 900px;
}
The key is the margin: 0 auto; on the inner div. A proof-of-concept example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div style="background-color: blue; width: 100%;">
<div style="background-color: yellow; width: 940px; margin: 0 auto;">
Test
</div>
</div>
</body>
</html>
Source: Stackoverflow.com