如何实现裁剪后CSS Grid的垂直居中并适配所有视口？

需求与问题 #

需要实现以下布局：

• 左侧列上下排列两张图片，右侧列是垂直居中的文本块
• 容器固定高度400px，网格整体始终垂直居中
• 图片上下部分被裁剪，且两张图片间20px的间距必须始终处于容器高度的中间位置

当前实现在宽屏视图正常，但窄屏时内容垂直偏移，顶部被过度裁剪，需要适配所有视口的稳定方案。

修正后的代码实现 #

HTML代码 #

<div class="container">
  <div class="grid">
    <div class="item item_a"><img src="图片1地址" alt="图片1"></div>
    <div class="item item_b">Text Block... 这里是需要垂直居中的文本内容，支持多行显示</div>
    <div class="item item_c"><img src="图片2地址" alt="图片2"></div>
  </div>
</div>

CSS代码 #

.container {
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center; /* 确保网格容器垂直居中 */
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 精确计算图片行高，保证20px gap处于容器中点 */
  grid-template-rows: calc((400px - 20px) / 2) calc((400px - 20px) / 2);
  gap: 20px;
  grid-template-areas: 
    "a b" 
    "c b";
}

.item_a { grid-area: a; }
.item_c { grid-area: c; }

.item_b {
  grid-area: b;
  align-self: center; /* 文本块在网格中垂直居中 */
  display: flex;
  align-items: center; /* 文本内容自身垂直居中 */
  padding: 0 20px; /* 可选：添加内边距优化窄屏显示 */
}

.item_a img, .item_c img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片居中裁剪，填满容器 */
  object-position: center; /* 强制裁剪区域居中 */
}

关键优化点 #

• 容器Flex布局：替代原方案的transform: translateY(-50%)，通过display: flex + align-items: center实现网格容器的稳定垂直居中，避免窄屏时因网格高度变化导致的偏移。
• 精确行高计算：用calc((400px - 20px) / 2)计算每张图片的高度，确保两张图片总高度+20px gap正好等于容器高度，让gap精准落在容器垂直中点。
• 图片居中裁剪：object-fit: cover和object-position: center保证图片无论宽高比如何，都能填满容器并居中裁剪，不会出现拉伸或偏移。
• 文本块双重居中：网格层面的align-self: center确保文本块整体居中，内部flex + align-items: center保证多行文本也垂直居中。

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