本文详解如何使用纯 css 实现标题与图片的水平垂直居中，同时确保图片作为可点击链接正常工作，并兼容不同尺寸图像——摒弃已废弃的 `
在构建具有动态背景（如 CSS 动画切换的 Matrix 风格图层）的页面时，常需将核心内容（如标题和功能图标）精准居中显示，且保证交互可用性。原代码存在多个关键问题：<center> 标签已废弃；内联 style="width:35%" 破坏维护性；锚点（<a>）默认为行内元素，无法约束子元素尺寸；图片原始尺寸差异导致视觉失衡；#header 与图片同处 #background 内却未统一居中逻辑。
以下为专业级解决方案，兼顾兼容性、可维护性与响应式表现：
✅ 正确的 HTML 结构（语义清晰）
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pills</title>
<!-- 将所有 CSS 放入 head 中 -->
<style>
/* 见下方 CSS 部分 */
</style>
</head>
<body>
<!-- 背景容器仅负责动画，内容由子元素承载 -->
<div id="background">
<h1 id="header">Pills</h1>
<!-- 移除 <center>，用 CSS 控制布局 -->
<a href="https://google.com" class="pill-link">
<img src="https://i.sstatic.net/D8d6J.png" alt="Red Pill">
</a>
<a href="https://google.com" class="pill-link">
<img src="https://i.sstatic.net/wPa6r.png" alt="Blue Pill">
</a>
</div>
</body>✅ 精准居中与链接可用性的 CSS 方案
body {
margin: 0;
overflow: hidden;
height: 100vh; /* 确保 body 占满视口，支撑后续居中 */
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none; /* 允许点击穿透至内部链接 */
background-size: cover;
background-position: center;
animation: matrix-rain 10s linear infinite;
/* 关键：启用 Flex 布局实现绝对居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/* 居中标题 */
#header {
font-family: fantasy;
color: white;
font-size: 400%;
margin: 0 0 2rem 0; /* 用 margin 控制标题与图片间距，避免依赖固定 top */
z-index: 2; /* 确保标题在背景之上 */
}
/* 可点击图片链接容器 */
.pill-link {
display: inline-block; /* 使锚点能包裹图片并参与 flex 对齐 */
margin: 0 1rem; /* 水平间距 */
max-width: 40vw; /* 响应式最大宽度，防止大屏溢出 */
z-index: 2;
}
.pill-link img {
max-width: 100%;
height: auto;
display: block; /* 消除图片底部默认空白 */
}
/* 处理图片尺寸差异的推荐方式：CSS 裁剪或缩放（二选一） */
/* 方案1：等比例缩放（推荐） */
.pill-link:nth-child(2) img { /* 第二张图（蓝丸） */
transform: scale(0.9); /* 微调至与红丸视觉协调 */
transition: transform 0.2s ease;
}
.pill-link:hover img {
transform: scale(1.05);
}
/* 方案2：统一容器高度 + object-fit（更精确控制） */
/*
.pill-link {
width: 200px;
height: 200px;
}
.pill-link img {
width: 100%;
height: 100%;
object-fit: contain; /* 保持比例，完整显示 */
}
*/
@keyframes matrix-rain {
/* ...（保持原 keyframes 不变）... */
}⚠️ 关键注意事项
- 链接协议必须完整：href="google.com" 会触发相对路径跳转，务必写成 href="https://google.com" 或 /path；
- pointer-events: none 的影响：它使 #background 本身不可点击，但其子元素（如 <a>）若显式设置 pointer-events: auto（默认值）仍可响应，无需额外声明；
- 图片可访问性：始终为 <img> 添加 alt 属性，提升无障碍体验；
-
移动端适配：40vw 的 max-width 在小屏下自动收缩，如需更强控制，可添加媒体查询：
@media (max-width: 768px) { .pill-link { max-width: 60vw; } #header { font-size: 250%; } }
✅ 总结
居中不是靠 text-align 或 <center>，而是通过 display: flex + justify-content/align-items 实现真正的二维中心定位；可点击性依赖于 <a> 的 display: inline-block 或 block 以正确包裹内容；尺寸不一致问题应优先通过 CSS 缩放（transform: scale()）或 object-fit 解决，而非修改原始图片文件。此方案零 JavaScript 依赖，轻量、高效、符合现代 Web 开发规范。
