div相对屏幕居中

 

div相对屏幕居中

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年7月21日 10:20:28 星期一

 

原理很简单,主要记住以下3点：

 

第一点要求:position:absolute

第二点要求:left:50%;top:50%

第三点要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)]

 

原理：

先让这个DIV绝对定位;

让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;

因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了.

 

举例： 

<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;

margin-top:-150px;margin-left:-175px;border:solid #000 5px;">

</div>

 

<style type="text/css">   
<!--   
div {   
position: absolute;      /*绝对定位*/   
top: 50%;                  /* 距顶部50%*/   
left: 50%;                  /* 距左边50%*/   
height: 200px;  margin-top: -100px;   /*margin-top为height一半的负值*/   
width: 400px;  margin-left: -200px;    /*margin-left为width一半的负值*/   
}   
-->   
</style> 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2014年7月21日 10:20:28 星期一