是否可以使用填充来居中元素：0 auto？

Question

是否可以将元素居中，就像我用边距但用填充？

.elem{
  margin: 0 auto;
}

会变成：

.elem{
  padding: 0 auto;
}

我可以看到它不会以这种方式工作，但有没有办法模拟相同的行为？

Answer 1

实际上你不能做填充：0 auto;但有一个技巧可以做同样的事情：

.elem{
    padding: 0 calc(50% - 160px);
}

这与max-width: 320px; + margin: 0 auto;类似 所以，不幸的是，最大宽度是隐含的但是......无论如何这都非常有用。

解释：

这就是这里真正发生的事情：

paddingRight = paddingLeft = (parentWidth - elemMaxWidth) / 2;

这意味着我们取父宽度，减去元素宽度，其余是右边距加上左边距的值，所以我们除以2。

此方法几乎适用于所有浏览器，但适用于旧的IE版本。