本文介绍使用 CSS Grid 的 place-content: center 实现姓名与职位在视口内真正垂直水平居中，兼容顶部固定导航栏等布局干扰，并提供语义化 HTML 结构与可复用样式方案。
本文介绍使用 css grid 的 `place-content: center` 实现姓名与职位在视口内真正垂直水平居中，兼容顶部固定导航栏等布局干扰，并提供语义化 html 结构与可复用样式方案。
在个人主页“欢迎页”（Landing Page）中，将姓名（如 HasanMirza）与职位（如 Web Developer）严格居中显示，看似简单，实则常因布局上下文（如 position: fixed 导航栏、默认 body 边距、盒模型计算偏差）导致视觉偏移。仅靠 Flexbox 的 align-items: center; justify-content: center 在存在 60px 高固定头部时，会以整个 100vh 为基准居中，而非“可视区域内容区”，从而造成实际位置偏高。
推荐解法：CSS Grid + position: fixed + 重置基础样式
/* 重置默认边距，避免 body 8px 默认外边距干扰 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.landing {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: grid;
place-content: center; /* 等价于 align-content: center; justify-content: center; */
z-index: 10; /* 确保置于其他固定元素之上（如导航栏） */
}此方案优势显著：
- ✅ position: fixed 使容器脱离文档流，完全无视页面其他元素（包括 position: fixed 导航栏），直接基于视口定位；
- ✅ place-content: center 是 Grid 布局中最简洁、最鲁棒的双轴居中方式，无需计算 transform 或 margin，且天然支持多行子元素堆叠居中；
- ✅ 兼容所有现代浏览器（Chrome 66+、Firefox 63+、Safari 12.1+、Edge 79+）。
HTML 结构建议采用语义化增强写法，既保持清晰层级，又便于后续 SEO 与无障碍访问：
<div class="landing" aria-label="首页欢迎信息"> <h1 class="landing-name">HasanMirza</h1> <p class="landing-title">Web De<span class="v">v</span>eloper</p> </div>
? 提示：使用
和
替代无语义的
，不仅提升可访问性（屏幕阅读器能正确识别主标题与副标题），也利于搜索引擎理解内容权重。若需保留顶部固定导航栏（例如高度 60px），只需微调 .landing 容器的 top 值，并通过 calc() 动态排除其占用空间（但注意：这会使其变为“内容区居中”，而非“视口居中”。如需绝对视口居中，请保持 top: 0 并确保导航栏 z-index 低于 .landing）：
/* 方案二：让文字在「内容可视区」内居中（避开 60px 导航栏） */ .landing { position: fixed; top: 60px; /* 跳过导航栏高度 */ left: 0; width: 100vw; height: calc(100vh - 60px); display: grid; place-content: center; }最后，针对原文中旋转字母 v 的视觉效果，可补充如下轻量级 CSS：
.v { display: inline-block; transform: rotate(45deg); transform-origin: center; }总结关键实践原则：
- 居中首选 display: grid; place-content: center，它比 Flexbox 更直观、更少副作用；
- 使用 position: fixed 时务必重置 body { margin: 0 }，并显式声明 top/left；
- HTML 结构优先语义化（
+
），兼顾可访问性与维护性；
- 所有尺寸单位统一使用 vh/vw 或 rem，避免 px 导致缩放失真。
这套方案已在多个个人作品集站点中稳定运行，无论设备尺寸、浏览器类型或页面复杂度如何变化，均能实现像素级精准居中。
