Center Div inside another (100% width) div

问题

Quite a "simple" problem here and not sure why it's being so complicated.

Have a 100% (width) sized div.
Have another div positioned in the middle of this div (sized 940px width)

Any ideas? :)

回答1:

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

回答2:

The below style to the inner div will center it.

margin: 0 auto;

回答3:

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

回答4:

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>

回答5:

.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Doesn't work in internet explorer 7... but who cares ?

回答6:

Just add margin: 0 auto; to the inside div.

来源：https://stackoverflow.com/questions/1423651/center-div-inside-another-100-width-div

标签

css

xhtml