Center Div inside another (100% width) div

后端未结

关注

 6  991

闹比i

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

相关标签:

6条回答

小蘑菇

2020-12-23 10:11
The below style to the inner div will center it.
```
margin: 0 auto;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
刺人心

2020-12-23 10:12
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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2020-12-23 10:20

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

[愿得一人]

2020-12-23 10:24

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

0 讨论(0)

别那么骄傲

2020-12-23 10:28

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>

0 讨论(0)

忘掉有多难

2020-12-23 10:29
```
.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}
```
Doesn't work in internet explorer 7... but who cares ?
0 讨论(0)
发布评论:

提交评论
- 加载中...