• 历史遗留的CSS痛点：早年CSS没有Flexbox、Grid这类现代布局工具，要实现居中只能靠各种“hack”：

  • 水平居中用margin: 0 auto，但只对定宽块级元素生效，不定宽的话直接失效；
  • 垂直居中得用position: absolute加负margin，但必须提前知道元素的宽高，动态内容完全没法用；
  • 还有用table布局模拟垂直居中，代码冗余到离谱，还容易破坏页面结构。
    这些方法有一堆限制，稍微改个元素尺寸或者父容器属性，居中就崩了，当年踩过这些坑的开发者至今印象深刻。

• 场景复杂度的差异：你平时做的大概率是简单场景——比如固定尺寸的水平居中，或者用现代CSS快速实现的居中。但实际开发中会碰到各种棘手情况：不定宽高的动态内容、父容器尺寸随内容变化、多层嵌套的元素、还要兼容IE这类老浏览器，这些场景下早年的方法根本玩不转，分分钟让你怀疑人生。

• 新手的认知门槛：刚学CSS的人对盒模型、定位规则理解不深，比如不知道margin: auto在绝对定位里不生效，或者搞混了块级/行内元素的布局逻辑，明明照着教程写却出不来效果，自然会觉得“居中怎么这么难”。而老开发者因为踩过无数这类坑，看到梗就会会心一笑。

• 新老工具的反差：现在用Flexbox一行代码display: flex; justify-content: center; align-items: center;就能搞定任意居中，但梗的流行源于过去的痛苦经历，很多老开发者拿当年的糟心事玩梗，而你一上手就用现代CSS，没经历过那个“黑暗时代”，所以会觉得困惑。

内容的提问来源于stack exchange，提问作者Lewis