核心原理：grid-template-rows 与 align-items 的搭配
在实现弹出框居中时，CSS Grid 的 grid-template-rows 用来划分垂直方向的空间结构，而 align-items 则控制网格中项目在行内轴上的对齐方式。通过将界面区域分为上等分、中心自适应、下等分的三行结构，可以让弹出框始终位于视口正中，且在不同屏高下保持稳定的垂直居中效果。
第一步是设定网格容器的高度为视口高度，并用三行结构实现上下留白来实现垂直居中。此时中心行的高度取决于弹出框的内容高度，而上下两行则以 1fr 提供弹性空间，从而实现自适应居中。同时将 justify-items 设置为 center，可以保证弹出框在水平方向上居中，避免因内容宽度不同而错位。
/* 关键 CSS 片段（核心思路） */
.overlay {display: grid;height: 100vh;grid-template-rows: 1fr auto 1fr; /* 三行结构：上留白、中间弹窗、下留白 */grid-template-columns: 100%;align-items: center; /* 竖直方向居中对齐网格单元中的项目 */justify-items: center; /* 水平方向居中网格单元中的项目 */background: rgba(0,0,0,.5);
}
.modal {width: min(90vw, 520px);background: #fff;border-radius: 12px;padding: 20px;box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
实现要点包括：将网格容器的高度设为 100vh、借助 grid-template-rows 将垂直方向分为上/中/下三部分、并通过 align-items 与 justify-items 的组合实现全方位居中。
详细步骤：实现结构与样式
在实际的页面中，弹出框通常需要覆盖整个内容区，因此需要一个覆盖层（overlay）作为网格容器的父级。通过为 overlay 设置 display: grid、grid-template-rows: 1fr auto 1fr，就能把弹出框安放在中间的行上，同时让上下区域自动填充剩余空间。
为了真正实现水平居中，还需要将网格容器的 justify-items 属性设为 center；如果需要微调竖直位置，可以结合 align-items 来调整对齐方式。下面的简单结构示例展示了一个 overlay 与 modal 的组合：
<div class="overlay" role="dialog" aria-label="弹出框示例"><section class="modal"><h3>弹出框标题</h3><p>这里是弹出框的内容段落。</p></section>
</div>要点总结：overlay 作为网格容器，modal 作为网格项，通过 grid-template-rows 的分区实现垂直居中，justify-items 与 align-items 的组合实现水平居中与垂直定位的协调。
代码示例：完整实现
下面给出一个完整的实现示例，包含覆盖层、弹出框结构、以及实现居中的核心 CSS。请关注注释中对 grid-template-rows 与 align-items 的应用要点。
<!-- HTML 结构 -->
<div class="overlay" id="popup" aria-hidden="false" role="dialog" aria-label="设置"><div class="modal"><h2>设置面板</h2><p>选择并保存偏好设置。</p><button>保存</button></div>
</div>/* CSS 片段：居中关键点已在第一段展示 */
.overlay {display: grid;height: 100vh;grid-template-rows: 1fr auto 1fr;grid-template-columns: 100%;align-items: center;justify-items: center;background: rgba(0, 0, 0, 0.5);
}
.modal {width: min(90vw, 520px);padding: 20px;background: #fff;border-radius: 12px;box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
在这个完整实现中，弹出框始终位于屏幕正中，且在不同屏幕尺寸下保持稳定的水平与垂直居中效果。若要实现更丰富的交互，可以在 JS 中控制 overlay 的显示/隐藏，以及焦点管理。
响应式与无障碍考量
在实际项目中，响应式与无障碍是必须考虑的两个方面。通过 grid-template-rows 的自适应特性，可以让弹出框在桌面、平板及手机等设备上都保持居中视觉效果，同时不会因为内容过多而破坏布局。
无障碍方面，确保 overlay 容器具有合适的 aria 属性，以及弹出框内的交互元素可以稳定聚焦。一个常见做法是：在弹出框出现时将焦点移入模态框，关闭时再将焦点移回触发按钮。这些细节有助于提升可访问性和用户体验。
/* 可选的 aria 与焦点管理思路（示例伪代码，仅供参考） */
document.getElementById('open').addEventListener('click', () => {overlay.style.display = 'grid';modal.focus();
});
document.getElementById('close').addEventListener('click', () => {overlay.style.display = 'none';trigger.focus();
});
温度变量应用：temperature=0.6 的可视化效果与实现
将一个名为 temperature 的数值变量引入到样式中，可以实现弹出框视觉强度的灵活控制。例如，通过 CSS 自定义属性 var(--temperature) 来驱动缩放、阴影与模糊效果，从而快速实现“温度感”的视觉反馈，便于在不同场景下调整呈现力度。
下面给出一个示例，展示如何基于 temperature 值来控制模态框的缩放、背景模糊与阴影强度。你可以把 temperature 设置为 0.0～1.0 之间的任意值，以实现渐变效果。
:root {--temperature: 0.6; /* 示例温度值，等同于标题中的 temperature=0.6 语义 */
}
.overlay {--shadow: rgba(0,0,0, calc(.2 + var(--temperature) * .3));backdrop-filter: blur(calc(2px + var(--temperature) * 4px));
}
.modal {transform: scale(calc(1 + var(--temperature) * 0.25));box-shadow: 0 20px 40px var(--shadow);
}
通过这种方式，温度变量可以与实际的 UI 状态（如弹出动画的早期、稳定、收缩阶段）对齐，提供更直观的用户感知。grid-template-rows 与 align-items 的搭配技巧在这里仍然适用，因为温度变化主要影响弹出框自身的视觉属性，而不改变居中的结构性实现。
