没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。
1、先让这个DIV绝对定位.
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了;
记住以上3个要点,来看个例子
|
以下是代码片段：
<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
</div>
代码分析
符合第一点要求:position:absolute;
符合第二点要求:left:50%;top:50%;
符合第三点要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)];
|
这样就很简单的使div在屏幕居中了.
原载: No.1网络工作室 http://www.noonenet.cn/
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。
Tags:
div屏幕居中,相对屏幕居中,css屏幕居中同类文章：
·
css实现黑白图片变彩色图片效果·
CSS设计布局口诀·
div+css写圆角效果·
火狐不支持text-indent属性·
设计师必看的30个CSS画廊和网站设计收集（六）
