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;
}