如何将文本定位到SVG上方且不破坏页面响应式布局？

问题原因 #

你原先的布局失效是两个核心问题导致的：

• 给.container加了position: absolute脱离了正常文档流，父元素高度计算异常，直接破坏响应式规则
• h1标签和SVG的父级.row平级，没有放在同一个定位上下文中，没法自然对齐到SVG区域

修复方案 #

直接把s文本放在和SVG同一个.row内，用相对定位+flex对齐即可，不需要额外加脱离文档流的全局绝对定位，修改后的完整代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<section class="justify-content-center d-flex">
  <div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center position-relative">
      <svg width="200" height="200" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="600" height="600" fill="#C4C4C4"/>
      </svg>
      <h1 class="position-absolute m-0">s</h1>
    </div>
  </div>
</section>

改动说明 #

• 移除了.container上的position: absolute属性，保证容器回归正常文档流，Bootstrap原生响应式规则正常生效
• 把h1移到存放SVG的.row内部，给父级.row加position: relative作为定位上下文
• 给h1加position: absolute使其脱离当前行的文档流，不会把SVG挤开，父级flex的居中属性会自动把s对齐到SVG正中心
• 额外给h1加m-0清除默认外边距，避免出现位置偏移

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