HTML/CSS 水平垂直居中的方法避坑指南（完整版）

在HTML/CSS开发中摸爬滚打这些年，水平垂直居中的方法是我认为性价比最高的知识点之一：学习成本低，使用频率高，避坑价值大。

问题一：水平垂直居中的方法应该从哪里入手？

水平垂直居中的方法的学习要理论结合实践，看懂和写对是两码事。

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

问题二：水平垂直居中的方法的代码长什么样？

下面通过Flex 一行代码实现居中来实际演示一下：

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

问题三：用水平垂直居中的方法要注意什么？

• 代码提交前跑一遍完整测试，别把 CI 当你的本地环境。
• 关键操作加二次确认，手滑的代价有时候承受不起。

掌握水平垂直居中的方法之后，建议再看看它相关的上下游知识，把点连成线，技术视野会开阔很多。

遇见问题加 QQ23979811 协助处理