使用margin: auto实现元素居中是否必须指定元素宽度？

这是块级元素的盒模型特性决定的：

• 块级元素默认是width: auto，会自动撑满父容器的可用水平空间，这时候左右方向没有多余空隙给margin: auto分配，自然没法让元素偏移居中。
• 当你给元素设置了固定宽度（比如width: 400px）或者非100%的宽度（比如width: 80%），元素宽度就小于父容器可用宽度了，此时浏览器会把父容器剩余的水平空间，平均分配给元素的左、右margin，元素也就自动居中了。

举个直观的代码对比：

/* 无法居中：元素占满父容器，无空间给margin */
.container .box {
  margin: 0 auto;
}

/* 成功居中：指定宽度后，剩余空间由左右margin均分 */
.container .box {
  width: 500px;
  margin: 0 auto;
}

另外提一句：如果是行内/行内块元素，用margin: auto是没用的，得给父元素加text-align: center来实现居中。

内容的提问来源于stack exchange，提问作者lunatic