响应式布局中如何实现文字居中悬浮于图片上方并同步缩放

最优实现方案（纯CSS，无需JS） #

直接用CSS Grid实现元素堆叠与居中，可自动同步图片和文字容器尺寸，完全满足需求，实现代码如下：

调整后的CSS代码 #

/* 确保col-2高度与同row的col-10高度自动对齐（bootstrap row默认flex布局自带该特性，无需额外修改），给col-2加如下属性让内部内容垂直居中，可按需调整 */
.col-2 {
  display: flex;
  align-items: center;
}
.stackParent {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center; /* 子元素默认水平垂直居中 */
}
/* 图片和文字容器放在同一网格区域，自动重叠，尺寸自动同步 */
.stack-Img, .stack-Txt {
  grid-area: 1 / 1 / 2 / 2;
}
.stack-Img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.stack-Txt {
  z-index: 4;
  text-align: center;
}

方案优势 #

• 不需要JS监听窗口resize事件，无性能损耗，也不会出现尺寸同步延迟的问题
• 自动适配col-2的动态高度，图片永远不会溢出容器，同时保持原有比例
• 文字会始终固定在图片正中间，不管窗口怎么缩放、col-10高度怎么变都不会偏移

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