让一个盒子模型居中的方法

第一种方法:

div.box{

weight:200px;

height:400px;



position:absolute;



left:50%;

top:50%;



margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法:

div.box{

weight:200px;

height:400px;



position:absolute;



left:50%;

top:50%;



transform:translate(-50%,-50%);

}



*这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器



---------------

第三种方法

div.box{

weight:200px;

height:400px;



position:absolute;



left:0;

right:0;

top:0;

bottom:0;



margin:auto;

}

你可能感兴趣的:(让一个盒子模型居中的方法)