居中：为何总是失败？

许多开发者在使用CSS布局时，会发现相对定位(relative)无法完美实现元素居中。本文通过一个案例分析，解释relative定位与(absolute)、(fixed)的差异，揭示relative定位为何在某些情况下无法实现。

我们来看一个例子：

<div class="box"></div>

CSS样式：

.box {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

使用absolute或fixed定位，.box元素可以轻松实现水平和垂直居中。但使用relative定位，只能实现水平居中，垂直居中却失效。这是因为：

left、right、top、bottom属性在不同position值下的行为不同。 absolute和fixed定位的元素脱离文档流，这些属性相对于其包含块（contning block）定位。包含块默认为

而relative定位的元素仍在文档流中，left、right、top、bottom属性表示元素相对于其自身初始位置的偏移量，而非相对于父元素或

因此，单纯使用relative定位无法实现元素的完美居中。