使用margin自动居中？

Question

我正在尝试将div内容居中，我的父容器设置为Relative。

我正在内部div上使用它

    position: absolute;
    margin: auto;
    width: 70px;
    height: 70px;

但是它拒绝居中，我必须在左边和右边加上0，但是我不明白为什么。

    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 70px;
    height: 70px;

我认为居中只需要一个宽度，该宽度就是这个。

我对为什么将right / left设置为0感到有些困惑-似乎有用。

同样，如果图像为70像素，父框为200像素（正确），则将右设置为0，左设置为0-这实际上在做什么？

任何想法，我可能都不正确理解。

谢谢。

Answer 1

修复是绝对居中。您快到了：

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

您需要将所有四个方向都设置为0，并且您的子div将完全位于父级的中间。

Answer 2

使用right或left（和position: absolute），您将div绝对对齐到父元素，在这种情况下，使用0偏移量。尝试在浏览器的开发者控制台中使用它们的值。

Answer 3

当元素的位置绝对/相对时，您可以使用left和right属性您可以仅使用margin: auto;将内部元素在两个轴上居中或使用margin: 0 auto;在x轴上。

.parent{
  width: 200px;
  height: 200px;
  background: red;
}

.child{
  margin: auto;
  width: 70px;
  height: 70px;
  background: green;
}

Answer 4

您是否尝试过以下方法：

     margin: 0 auto;

问题是您将位置设置为绝对位置。如果您删除了所有与位置相关的内容，则只需为'margin：0 auto'设置宽度以使内容居中。

编辑：解释问题。