超乎你认知的绝对定位+margin auto，原来是这样设计的

一直以来，如何居中都是前端开发领域的一个热点问题。相信每一个前端开发人员都能说几种居中的方法。

然而，你可曾想过背后更深层次的东西？

借着本文，我将就使用 margin 来实现垂直居中的问题，阐述我的见解。

我们首先讨论水平居中的情况。

<div style="width: 200px; margin: 0 auto;">
  我是内容
</div>

这种方法通过设置元素的宽度和外边距，即可实现元素的水平居中。

然而，当我们需要实现垂直居中时，情况就变得复杂了。

<div style="height: 200px; margin: 0 auto;">
  我是内容
</div>

这种方法无法实现垂直居中，因为元素的高度是固定的，而外边距是相对于元素本身而言的。

为了解决这个问题，我们可以使用绝对定位来实现垂直居中。

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  我是内容
</div>

这种方法通过将元素定位到父元素的中心点，再使用 transform 来平移元素，即可实现元素的垂直居中。

然而，这种方法存在一个问题，就是当父元素的高度改变时，元素的位置也会发生变化。

为了解决这个问题，我们可以使用 margin auto 来实现垂直居中。

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
    我是内容
  </div>
</div>

这种方法通过在父元素上设置相对定位，然后在子元素上设置绝对定位并使用 margin auto，即可实现元素的垂直居中。

这种方法的原理是，margin auto 会使元素在父元素中水平和垂直居中。

然而，这种方法存在一个问题，就是当父元素的高度不是固定的时，元素的位置也会发生变化。

为了解决这个问题，我们可以使用 flex 布局来实现垂直居中。

<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
  <div>
    我是内容
  </div>
</div>

这种方法通过使用 flex 布局的 align-items 和 justify-content 属性，即可实现元素的垂直居中。

这种方法的优点是，当父元素的高度改变时，元素的位置不会发生变化。

然而，这种方法也存在一个问题，就是IE浏览器不支持 flex 布局。

为了解决这个问题，我们可以使用 CSS3 的 transform 属性来实现垂直居中。

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    我是内容
  </div>
</div>

这种方法的原理是，transform 属性可以平移元素的位置。

通过设置元素的 top 和 left 属性为 50%，再使用 transform 属性平移元素，即可实现元素的垂直居中。

这种方法的优点是，它兼容所有浏览器。

然而，这种方法也存在一个问题，就是当父元素的高度改变时，元素的位置也会发生变化。

为了解决这个问题，我们可以使用 CSS3 的 calc() 函数来实现垂直居中。

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: calc(50% - 100px); left: 50%; transform: translate(-50%, -50%);">
    我是内容
  </div>
</div>

这种方法的原理是，calc() 函数可以计算元素的实际位置。

通过设置元素的 top 属性为 calc(50% - 100px)，即可实现元素的垂直居中。

这种方法的优点是，当父元素的高度改变时，元素的位置不会发生变化。

然而，这种方法也存在一个问题，就是IE浏览器不支持 calc() 函数。

为了解决这个问题，我们可以使用 JavaScript 来实现垂直居中。

var div = document.getElementById("div");
div.style.top = (div.parentElement.clientHeight - div.clientHeight) / 2 + "px";

这种方法的原理是，JavaScript 可以获取元素的实际高度和父元素的实际高度，然后计算出元素的实际位置。

通过设置元素的 top 属性为计算出的实际位置，即可实现元素的垂直居中。

这种方法的优点是，它兼容所有浏览器。

然而，这种方法也存在一个问题，就是当父元素的高度改变时，需要重新计算元素的实际位置。

以上便是垂直居中的几种实现方法。

每种方法都有自己的优缺点，我们需要根据实际情况选择合适的方法。