本文介绍使用 CSS Grid 的 place-content: center 实现姓名与职位在视口内真正垂直水平居中，并完美兼容顶部固定导航栏等布局干扰，同时提供语义化 HTML 结构与可维护的样式实践。

本文介绍使用 css grid 的 `place-content: center` 实现姓名与职位在视口内真正垂直水平居中，并完美兼容顶部固定导航栏等布局干扰，同时提供语义化 html 结构与可维护的样式实践。

在构建个人主页首屏（Landing Section）时，常需将姓名（如 “HasanMirza”）与职位（如 “Web Developer”）严格居中于整个视口——不仅视觉上居中，更要逻辑上无视其他元素（如 position: fixed 的 60px 高度导航栏）的影响。虽然 Flexbox 的 align-items: center; justify-content: center 是常见解法，但其依赖容器尺寸计算，在存在固定定位头部时易因 100vh 未扣除头部高度而造成偏移。

更鲁棒、更简洁的现代方案是：结合 position: fixed 与 CSS Grid 的 place-content 属性。place-content: center 是 justify-content: center 和 align-items: center 的简写，专为二维居中设计，且对 fixed 定位容器支持极佳。

✅ 推荐实现代码

/* 重置默认边距，避免 body 默认 8px 外边距干扰居中 */ body {   margin: 0; }  .landing {   position: fixed;   top: 0;   left: 0;   width: 100vw;   height: 100vh;   display: grid;   place-content: center; /* 关键：一行代码完成双轴居中 */   z-index: 10; /* 确保置于其他内容之上 */ }

对应 HTML 结构保持简洁清晰，推荐使用语义化内联标签（如

+

），而非无意义的 div：

<div class="landing">   <h1 class="landing-name">HasanMirza</h1>   <p class="landing-title">Web De<span class="v">v</span>eloper</p> </div>

? 小技巧：.v 类可继续保留用于旋转效果（如 transform: rotate(45deg)），它完全独立于居中逻辑，不影响布局稳定性。

⚠️ 注意事项与最佳实践

• 务必设置 body { margin: 0 }：浏览器默认 body 具有 8px 外边距，若不重置，会导致 .landing 实际偏移，破坏精确居中。

• 避免 height: 100vh 与固定头部冲突？无需调整！
  因为 position: fixed 使 .landing 脱离文档流，其 100vh 始终基于整个视口高度；只要 top: 0，它就从视口顶部开始铺满，place-content 自动将其内容锚定在视口正中心——天然免疫导航栏、页脚等任何其他元素的尺寸影响。

• 可选增强：响应式文字缩放
  为提升移动端可读性，建议为标题添加 clamp() 函数：

  .landing-name, .landing-title {   font-size: clamp(1.5rem, 4vw, 3.5rem);   text-align: center;   line-height: 1.3; }

• 无障碍友好：使用

  表达主名称，

  描述职位，比纯 div 更利于屏幕阅读器识别信息层级。

综上，position: fixed + display: grid + place-content: center 是当前最简洁、最可靠、最符合现代 CSS 规范的全屏居中方案。它不依赖父容器内边距或复杂计算，代码量少、可读性强、兼容性好（chrome 60+/firefox 63+/safari 12.1+ 均原生支持），是个人主页首屏标题布局的首选实践。