css让div永远居中

在网上看了很多, 让div居中,有设置 float:center,text-align:center的方式,但都不够完美。

当然,我这个方法,也是在网上搜到的,只是详细说明一下每一个css属性的含义而已。

.divCenter
{
    position:absolute;
    width:300px;
    height:160px;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-80px;
    background-color:Green;
}

position,既设置绝对定位,以免影响其他控件;

width,height:这个不用说了;

left, top: 50%,这说明什么呢?这说明当我们计算左边距和上边距时,是从body的,中间开始算的。left:50%,说明,以当前屏幕垂直中线为标准;top:50%,说明以当前屏幕的水平中线为标准;

margin-left: 左边距,为负值,说明是以left,既上面提到 的垂直中线为标准,向左边开始计值.;若为正,则是向右开始计值;这里的值应该设置成width的一半,width为300px,则它应该为-150px,这样看上去才会100%距中!

margin-top:道理同margin-left

你可能感兴趣的:(工作,Web前端)