HTML/CSS 水平垂直居中的方法进阶技巧分享（附代码示例）

不知道你有没有这种感觉：水平垂直居中的方法好像每次用都要现查文档。这说明理解还停留在表面。本文帮你把它真正内化成自己的东西。

第一步：先搞懂水平垂直居中的方法是什么

优先使用官方文档推荐的方式实现水平垂直居中的方法，不要随意复制来源不明的代码片段。

水平垂直居中的方法的默认值要搞清楚，很多 bug 都是「我以为默认是……」造成的。

第二步：用代码实现水平垂直居中的方法

举个例子，Flex 一行代码实现居中：

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

第三步：完善细节

• 上线前在预发布环境完整跑一遍，很多环境问题会提前暴露。
• 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。

结语

本文从概念、示例到避坑，把水平垂直居中的方法过了一遍。知识只有用起来才有价值，期待在你的项目里见到它的身影。

遇见问题加 QQ23979811 协助处理