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


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

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

阅读 213
评论
    3 个回答
    #box1{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      height:20px;
      width:20px;
      background-color:red;
      // margin:0 auto;    // 既然使用了定位,就没必要使用margin来布局
    }

    另外建议使用flex布局,居中简单
    align-item: center justify-content: center