CSS 玄学实录：当我试图让一个 div 居中时，佛祖笑了

前情提要：一个 div 引发的血案

每个前端开发者的职业生涯中，都有一段不堪回首的往事——居中一个 div。

你可能会说：“不就居中吗？margin: 0 auto 不就完事了？”

呵呵，年轻人，你太天真了。

第一回合：水平居中，轻松拿捏？

/* 块级元素水平居中 */
.block {
    width: 200px;
    margin: 0 auto;
}

嘗，行内元素？简单：

.parent {
    text-align: center;
}

看起来岁月静好，直到你把 position: absolute 丢进来：

.absolute-child {
    position: absolute;
    left: 50%;
    /* 然后发现……它偏了 */
    transform: translateX(-50%);
}

好家伙，一个居中居然要用 transform，这合理吗？这很 CSS。

第二回合：垂直居中，地狱模式开启

如果说水平居中是一道开胃菜，那垂直居中就是满汉全席上那道 “佛跳墙”——看着简单，做起来让人想出家。