牧羊岛

懒是不会有好果子吃滴//

导航

层定位方式让div在页面居中

Posted on 2010-06-23 12:34  牧羊岛  阅读(702)  评论(0)    收藏  举报

昨天的一道面试题，还是试卷上的，把我搞郁闷了，以前看过，但是没有实践，看来要多实践啊。

效果：

代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{height:100%; margin:0; padding:0; overflow:hidden; background-color:#F00;}
.d2{width:200px; height:200px; position:absolute; top:50%; left:50%; z-index:1;/* background-color:#FF0;*/}
.d3{background-color:#06C; width:200px; height:200px; position:relative; top:-50%; left:-50%;}
</style>
</head>

<body>
  <div class="d2"><div class="d3">this</div></div>
  <div class="d1">此处显示内容</div>
</body>
</html>

 

去掉d2的注释就知道居中的原理了，肯定还有其他方法，再议。。