如何用 CSS 居中一个 div
在 CSS 中居中元素，成了对整个 Web 布局模型更广泛不满的一个切入口：许多人记得过去用 `<center>` 标签和表格布局时居中是多么简单，而如今则要面对 flexbox、grid 以及细致的盒模型规则。评论者指出，现代 CSS 终于提供了强大、原生的方式来居中和对齐内容，但他们认为，心智模型、术语，以及旧浏览器的怪癖，让这件事比桌面 UI 框架或早期 HTML 时代复杂得多。玩笑和怀旧背后，是关于可访问性、跨设备响应式设计，以及 Web 不断演进的标准究竟是以灵活性换来了简单性，还是这种复杂性本来就是不可避免、甚至在很大程度上是自作自受的严肃讨论。
旧式 HTML 方法（<center>、表格）
- 许多人记得居中曾经非常简单：
<center>和基于表格的布局都很直接，而如今则对比出 CSS 的复杂性。 - 有人认为
<center>对常见场景来说其实“没那么糟”，而且浏览器内部仍然在有效支持它的行为。 - 也有人强调它不具语义、功能有限（主要只是水平居中），并且理应被弃用，改用 CSS。
- 用表格做布局被记作“确实能用”，也容易推理，但同时被批评为可访问性噩梦、难以维护，而且不具响应式。
为什么在 CSS 中居中感觉很难
- “居中”可能有不同含义：水平还是垂直，相对于父元素还是视口，单个元素还是多个元素，文本流方向，换行行为。
- 这些差异导致了多种 CSS 机制，而不是一个“把这个居中”的开关。
- 资深开发者描述了历史上的痛苦：Flexbox 出现之前的各种 hack、IE6 兼容性问题，以及微妙的浏览器差异。
- 有人说困惑源于错误的心智模型以及对盒模型、display 和定位的不了解；也有人反驳说，如果大多数人都会误解，那就是设计失败。
Flexbox 和 Grid 作为现代方案
- 很多人认为借助 Flexbox 和 Grid，居中已经是“解决了的问题”（
display: flex+justify-content/align-items，或display: grid+place-content: center）。 - 也有人觉得只为了让一个元素居中就用 Flexbox/Grid 过于大材小用，而且并不直观，像
justify-content和align-items这样的属性名也显得任意。 - 对于应该偏好哪种布局方式也有争论：有人几乎什么都用 Flexbox；也有人认为 Grid 被低估了，并且更适合真正的网格布局。
CSS 的复杂性与设计批评
- 不少人把 CSS 形容为“迷雾”或“灾难”：规则重叠、选择器优先级、继承，以及许多部分重叠的布局模型。
- 也有人为这种复杂性辩护，认为这反映了在未知视口和内容尺寸下进行自动布局的真实难度。
- 讨论还将其与桌面 UI 框架和游戏作比较，声称它们更早或更干净地解决了布局；反驳则是它们并不需要面对相同的跨设备、可访问性和用户覆盖需求。
语义、可访问性与真实世界中的使用
- 有一条很强的讨论线认为，用表格做布局以及误用 HTML 元素会损害屏幕阅读器，并把 DOM 顺序与展示绑定在一起。
- 反方则认为语义上的“纯粹”被过度强调了，而像 Tailwind 或表格布局这样的工具依然实用。
对文章和网站的反应
- 这篇文章被广泛称赞为“如何居中一个 div”的最佳、最全面解释，尤其是它的交互式演示。
- 也有人不喜欢网站的交互体验（滚动上的小花样、突然出现的头像/侧边助手），尽管仍然认可其内容。