使用Bootstrap居中SVG/div元素时偏移至中左位置如何解决？

核心问题原因 #

• 所有position-absolute定位的子元素，父容器未设置position: relative，导致定位基准错位，最终元素偏移。Bootstrap自带position-relative工具类，直接给对应父容器添加即可。
• 部分元素同时设置了position-relative和position-absolute，两个属性冲突，后者会覆盖前者，属于无效冗余代码。
• 第二块section的container添加了position-absolute h-100属性，直接脱离正常文档流，不受Bootstrap栅格系统约束，直接破坏响应式适配。

修正后代码片段 #

第一块区域修正 #

<!--Secion One-->
<section class="bg-dark d-flex align-items-center flex-1 text-light p-5 p-lg-0 text-center text-md-start position-relative" style="min-height: 500px;">
    <div class="container position-relative h-100">
        <div class="position-absolute top-50 start-50 translate-middle">
            <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
        </div>
        <div class="align-items-center text-center position-absolute top-50 start-0 translate-middle-y">
            <h3 class="languages">About</h3>
        </div>
        <div class="align-items-center text-center position-absolute top-50 end-0 translate-middle-y">
            <h3 class="languages">Langs</h3>
        </div>
    </div>            
</section>

第二块区域修正 #

<!--section2-->
<section class="position-relative" style="min-height: 600px;">
    <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
        <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>
      </div>
    </div>
</section>

额外注意事项 #

如果需要固定区域高度，直接给外层section设置min-height即可，不要随意给栅格容器添加绝对定位，Bootstrap栅格系统默认基于正常文档流做响应式适配，脱离文档流的定位会绕过适配规则导致布局错乱。

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