Flexbox设置align-items:center时h1与导航栏垂直居中效果不符预期

问题根源 #

你写的Flex核心逻辑没有错误，错位的核心原因是浏览器默认用户代理样式的干扰：

• 标题标签（<h1>到<h6>）默认带有上下外边距，主流桌面浏览器中<h1>默认上下外边距为0.67em，这部分边距会被计入Flex子项的总占位尺寸。
• align-items: center的规则是让Flex子项的外边距边界沿交叉轴居中，而非子项内部的文字内容居中，因此h1自带的上下边距会把文字位置挤偏，出现视觉上“大致居中但没对齐”的效果。

修复方案 #

直接清除默认边距干扰即可，完整参考代码如下：

/* 推荐先加全局重置，一劳永逸消除所有浏览器默认边距、盒模型差异问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-header {
  display: flex;
  align-items: center;
  /* 增加该行实现标题居左、导航居右的两端排布，匹配预期布局效果 */
  justify-content: space-between;
  /* 可选：给头部加内边距，避免内容贴边 */
  padding: 18px 32px;
}

/* 可选：给导航链接增加间距，优化视觉效果 */
nav a {
  margin-left: 24px;
}

如果不想加全局重置，单独给h1清除默认边距也能解决居中错位问题：

h1 {
  margin: 0;
}

补充优化 #

如果清除边距后仍觉得文字有细微的视觉错位，可以给h1和导航链接设置统一的行高，消除不同元素默认行高差异带来的对齐偏差：

h1, nav a {
  line-height: 1;
}

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