为什么以下css不能实现居中效果?


#box1{
  position:absolute;
  top:50%;
  height:20px;
  width:20px;
  background-color:red;
  margin:0 auto;
}

加了
left:0
right:0
以后又可以居中了

阅读 213
评论
    3 个回答

    使用margin+absolute实现水平(垂直)居中布局, 是要加left/right(top/bottom)为0, 并且设置宽度(高度)的, 然后设置margin:auto, 缺一不可。
    absolute本身脱离了文档流,试想如果未设置left/right,元素已经不归父元素管了,则浏览器怎么选择左右边距呢。