0

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

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

12月3日提问
3 个回答
0
#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

0

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

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

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

撰写答案

推广链接