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


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

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

阅读 205
评论
    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

      你要知道position:absolute、float、display:inline-block等一些属性会形成BFC,这个时候使用margin当然就失效了
      什么是BFC

      BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器

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

          撰写回答

          登录后参与交流、获取后续更新提醒