使用margin:auto将块元素水平居中放置是一种众所周知的技术。 但是您是否想知道为什么或如何运作？ 为了回答这个问题，我们首先需要看看margin：auto的工作原理。 同样，如果auto可以用于垂直居中，那么auto可以在边缘处做些什么，以及其他一些问题。
但是首先， auto实际上会做什么？
auto的定义随元素 ， 元素类型和上下文而变化。 边距auto表示两个意思之一：占用可用空间或0 px。 这两个将为元素定义不同的布局 。
“自动”占用可用空间
这是我们经常遇到的保证金auto的最常见用法。 通过将auto分配给元素的左右边缘，它们将平等地占据元素容器中的可用水平空间-从而使元素居中。
但是，这仅适用于水平边距（更多有关后面的原因 ），它也不适用于浮动 元素和内联元素 ，其本身也不能用于绝对 位置和固定位置的元素 （但是，我们将了解如何使这些工作）。
占用可用空间的人造浮法
由于auto在左右两个边距中均相等地占据了“可用”空间，因此，当只将auto值赋给其中一个时，您会怎么看？
使用auto左边距或右边距将占用所有“可用”空间，从而使元素看起来像是向右或向左冲洗。
“自动”计算为0px
如前所述， auto不适用于float，inline和absolute元素。 所有这些元素都已经决定了其布局 ，因此将auto用于边距并期望它像这样居中对齐没有用。
这将破坏使用float类的最初目的。 因此， auto在这些元素中的值为0px。
如果没有宽度，则auto也不适用于典型的块元素。 到目前为止，我向您展示的所有示例都有宽度。
值auto的宽度将具有0px边距 。 当块元素的宽度为auto或100%时，其宽度通常会覆盖其容器的宽度，因此在这种情况下，margin auto将被计算为0px 。
使用Value
顶部和底部页边距中的auto始终计算为0px（绝对元素除外）。 W3C规范这样说：
到目前为止，为什么会这样呢？ 这可能是由于典型的垂直页面流所致，其中页面大小在height方向上增加 。 因此，将元素垂直放置在容器中居中不会使它相对于页面本身显得居中，这与水平放置（在大多数情况下）不同。
也许是因为同样的原因，他们决定为绝对元素添加一个例外，该例外元素可以沿整个页面的高度垂直居中。
也可能是由于页边距崩溃效应 （相邻元素的页边距崩溃）所致，这是垂直页边距的另一个例外。
但是，后者似乎不太可能出现-因为不会折叠其边距的元素（例如Floats），以及具有visible以外的overflow元素，仍为auto分配了0px的垂直边距。
居中绝对定位元素
由于绝对定位的元素会发生例外情况，因此我们将使用auto值将一个元素垂直和水平居中。 但是在此之前，我们需要找出何时margin:auto可以像我们希望在绝对定位的元素中那样实际工作。
这是另一个W3C规范出现的地方：
几乎可以说，要使水平auto边距占据相等的空间， left ， width和right的值不应为auto ，即它们的默认值。 因此，我们要做的就是在绝对定位的元素中为其赋予一些价值。 left和right应该有完善的中心相等的值 。
规范还提到了垂直边距的类似内容。
因此，对于绝对元素垂直居中的情况 ，其top ， height和bottom值不应为auto 。
现在，通过结合所有这些，我们将获得：
结论
如果您想向右或向左刷新页面上的元素而没有以下元素将其包裹（例如float会发生什么情况），请记住可以使用auto设置边距。
仅将元素转换为绝对值以使其可以垂直居中可能不是一个好主意。 还有其他一些选项，例如flexbox和CSS transform更适合这些选项。
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
