[置顶]令人大开眼界的浏览器定位div中心点居中方法--PHP社区--YouYaX原创论坛

主页个人前端笔记令人大开眼界的浏览器定位div中心点居中方法

admin

发表于2012-11-11 18:52:25 只看楼主

楼主

头衔: 精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数: 502
金币数: 186
短消息

<!DOCTYPE html>
<html>
  <body>
     <div id="log"></div>
  </body>
</html>

要使div相对于浏览器定位中心点居中有2种经典的方法，而不必考虑document或者window对象
方法1

<style type="text/css">
  #log {
   width: 200px;
   height: 150px;
   position: fixed;
   left: 50%;
   top: 50%;
   margin-left: -100px;
   margin-top: -75px;
   border:1px solid red;
}
</style>

方法2

#log{
  position:fixed;
  margin:auto;
  left:0; right:0; top:0; bottom:0;
  width:200px; height:150px;
  border:1px solid red;
}

pany

我很赞同我很赞同我很赞同<script>alert('1')</script> (2014-06-13 17:42:40)

引用回复

操作点评

回复人
回复内容

操作管理