div相对屏幕居中

div相对屏幕居中

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

    1. 先让这个DIV绝对定位;

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

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


举个栗子: 
<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)]
    • http://dcoupe.diandian.com/post/2011-04-12/11162821
    • http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

div相对屏幕居中

上一篇:go outside @ CULTS LYRICS


下一篇:安装samba服务器