了解过 CSS 的人都知道，在正常布局中，通过 margin: 0 auto;可以实现水平居中。然而，使用 margin: auto;却无法实现水平居中，但在 flex 布局中却可以实现。不知道你是否有使用过这个技巧。

使用margin: auto;实现居中#

.container {
  display: flex; /* 使用 flex 布局实现水平和垂直居中 */
  width: 600px;
  height: 400px;
  background-color: bisque;
}

.child {
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: brown;
}

<div class="container">
  <div class="item"></div>
</div>

效果如下图所示：

是不是觉得很神奇？实际上，在 flex 布局中，通过margin: auto;可以实现垂直居中是因为 flex 布局的子元素在垂直方向上具有流动性，即子元素会尽可能地填满父元素的垂直空间。当将margin: auto;应用于一个元素时，浏览器会自动计算该元素的外边距值，以使其在剩余空间中居中对齐。在垂直方向上，如果元素的上下外边距都设置为 auto，浏览器会将剩余空间均匀分配给它们。

margin-left: auto; 应用#

既然margin: auto;有这样的作用，那么想象一下margin-left: auto;会怎么样呢？没错，它会将元素贴在右边。

这个应用场景非常多。比如常见的头部导航：

margin-top: auto; 应用#

margin-top: auto;自然会将元素贴在底部，这个用处也非常多。比如在商品列表中的操作区：

如果不加margin-top: auto;，购买按钮会随着商品描述的变动而移动，而商品描述的行数是不确定的，这可能会导致界面不一致。

还有其他许多场景可以使用，例如底部导航、底部按钮等等。假设在一个表单中，当内容不足一屏时，提交按钮应该在页面底部；当表单内容超过一屏时，提交按钮应该跟随内容高度移动。你可以思考一下如何实现这个效果。