如何实现图片在页面中心偏上布局并在图片正下方居中放置文本

• 图片设置position: absolute后直接脱离正常文档流，下方的说明文本无法感知图片的位置参照，自然无法固定在图片正下方
• 居中逻辑冲突：外层容器设为inline-block却没有做整体水平居中，图片靠绝对定位撑满四边的居中排版，和外层容器的流式排版完全不兼容，最终会出现图片和文本位置完全错位的问题
• 硬编码的margin-top: 200px偏移没有适配不同屏幕尺寸，无法稳定实现“页面中心略靠上”的展示效果

原有HTML结构无需改动，仅需替换CSS内容即可实现目标效果：

/* 外层容器：承接整个图片+说明块的整体定位 */
div.center {
  /* 让容器在视口内水平居中 */
  margin: 0 auto;
  position: relative;
  /* 用视口高度做参照，把容器推到垂直方向45%的位置，比完全中心的50vh略靠上 */
  top: 45vh;
  /* 让容器宽度刚好包住内部内容，避免撑满整行破坏居中 */
  width: fit-content;
  /* 容器内部所有行内类元素自动水平居中 */
  text-align: center;
}

/* 图片样式：移除所有脱离文档流的定位属性 */
div.center img#art {
  height: 320px;
  width: 250px;
  max-width: 90vw; /* 小屏设备下自动限制宽度，不会超出屏幕 */
  display: block; /* 图片转为块级元素，占据固定宽度位置，下方文本自然排在其下方 */
  margin: 0 auto; /* 图片在容器内部水平居中 */
}

/* 说明文本样式 */
div.center .description {
  display: block;
  margin-top: 12px; /* 和图片预留自然间距 */
  text-align: center; /* 文本自身居中对齐 */
}

• 整个“图片+说明文本”的组合块整体位于视口垂直方向偏上的位置，符合视觉居中的舒适观感，不会因为完全靠正中心显得下坠
• 图片和说明文本同处正常文档流中，相对位置永远固定，说明文本不会出现和图片错位、飘走的问题
• 所有尺寸适配都用相对单位，不同大小的屏幕下都能保持稳定的排版效果，不需要反复调整硬编码的像素值

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