诚信为本,优质服务,为客户创造价值!
全国服务热线:1354-3636362 新闻资讯 商标注册 400电话 控制面板 付款方式
»您的位置:首页 > 新闻资讯 > 网络技术 > 正文

div层相对屏幕居中

发布时间:2015/8/22 11:51:18 浏览次数:1117

没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。

1、先让这个div绝对定位
2、让他距离上边50%,左边50%,这时这个div左上角的这个点就是窗口的中心位置
3、因为已经知道了div的宽和高,那么再从这个点向左移动总宽及高的一半就可以了


记住以上3个要点,来看个例子


以下是代码片段:
[div style="width:400px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-200px;border:#F00 solid 5px;"][/div]


代码分析:
符合第一点要求:position:absolute
符合第二点要求:top:50%;left:50%
符合第三点要求:margin-left:-200px [也就是-(400/2)],margin-top:-150px [也就是-(300/2)]

«上一篇:网站建设不能忽视百度点评
»下一篇:css命名规则
二维码
在线客服 返回顶部