absolute元素水平居中

Solution 1:

给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数

.con{
  width:200px;
  height:200px;
  background:#ccc;
  position:relative;
}
.abs{
  width:40px;
  height:20px;
  background:steelblue;
  position:absolute;
  bottom:0;

  left:50%;
  margin-left:-20px;
}

Solution 2:

原理和1相似,设left:50%,但使用css3的transform:translate(x,y);

.con{
  width:200px;
  height:200px;
  background:#ccc;
  position:relative;
}
.abs{
  width:40px;
  height:20px;
  background:steelblue;
  position:absolute;
  bottom:0;

  left:50%;
  transform:translate(-50%);
}


Solution 3:

margin:auto;实现居中,但是absolute元素一定要有宽度,并且如果宽度不合适(常见于ul li)也是不会居中的

.con{
  width:200px;
  height:200px;
  background:#ccc;
  position:relative;
}
.abs{
  width:40px;
  height:20px;
  background:steelblue;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
}

 

上一篇:连通域降噪(转载)


下一篇:php – HTMLPurifier真的是防弹吗?