- 关于绝对（固定）定位居中的问题2016-05-29 02:51:52
第一种：
Div{
position:absolute;
background:#f60;
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
注解：div的父元素是body
第二种：
首先说一下margin:auto;大家在页面布局的时候都见过margin:0 auto;让页面局中，margin:auto;也一样只不过他不是让页面左右局中，而是他是上下左右都局中，margin:auto;让上下左右都auto。那么问题不是可以解决了。附上代码
div{
position:absolute;
background:#f60;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
第三种
div{
position:absolute;
width:200px;
height:200px;
background:#f60;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
-moz- transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
transform:translate(-50%,-50%);是让div偏移自身的50%；这个div的大小计算机会帮你计算，完全没必要自己拿比在哪里算还怕算错。
上述的定位也可以用固定定位，效果一样，在这里就不多做解释了，但是tansform属于css3中，低版本浏览器是不支持的
。
时间： 2024-10-09 09:42:26