1

我正在学习如何使用相对/绝对位置。

但是，我有点卡住了。

我试图在一个 div 中水平居中一个 div，但是当我添加margin: 0 auto;它时什么都不做。

我做了一个小提琴。

或者这里的代码：

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="DivTest.css" rel ="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
    <div id="header"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    </body>
</html>

CSS：

body, html {
     margin: 0;
     width: 100%;
}

#header{
     position: relative;
     width: 100%;
     height: 200px;
     background-color: lightgreen;
     margin: 0 0 20px 0;
}

#outer{
     position: relative;
     width: 800px;
     height: 500px;
     background-color: red;
     margin: 0 auto;

}

#inner{
     position: absolute;
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
}

任何帮助，将不胜感激。

4

1 回答 1

3

只需删除position:absolute;属性#inner

小提琴：http: //jsfiddle.net/Q8NVH/7/

于 2012-08-12T18:15:14.310 回答