关于绝对（固定）定位居中的问题

Posted 2020-07-15

• 关于绝对（固定）定位居中的问题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中，低版本浏览器是不支持的

---

。