关于网页设计中的绝对定位和居中

发布时间：2018-09-06 10:28 所属栏目：30 来源：站长网

导读：绝对定位和居中应该没有关系吧，关系不大，但有两种特殊情况可能遇见这样的问题。 body div id=warpper div id=header/div div id=sidebar/div div id=content/div? /div extraDivspan/span/extraDiv body 1 如果div#header,div#header,#header都是用绝对定

绝对定位和居中应该没有关系吧，关系不大，但有两种特殊情况可能遇见这样的问题。

<body>
<div id="warpper">
<div id="header"></div>
<div id="sidebar">/div>
<div id="content"></div?
</div>
<extraDiv><span></span></extraDiv>
<body>
1 如果div#header,div#header,#header都是用绝对定位，如何让他们居中呢？

#header, #sidebar, #content {
position: absolute;
}
可以这样做：

#warpper {
position: relative;
width: 800px;
margin: 0 auto;
}

2 如何对div#extraDiv进行居中？
注意，这个div在div#warpper的外面，我在csszengarden中了解了这么一个方法：首先将父元素绝对定位于页
面的最左边，并将其宽度指定为100%，在水平方向铺满整个浏览器，然后将其子元素设置为居中。

#extraDiv {
position: absolute;
width: 100%;
}
#extraDiv span {
width: 800px;
margin: 0 auto;
}
如果css有点基础了，推荐大家去看一下csszengarden，确实是本好书。

（编辑：ASP站长网）