使用Bootstrap实现按钮与下方文本的垂直水平居中适配问题

你的问题核心在于用百分比负margin调整间距，这种方式完全不可靠——百分比margin的计算基准是容器宽度，不同屏幕尺寸下宽度变化，间距自然会乱。而且你把按钮和文本拆到两个独立的flex容器里，完全没必要，反而增加了布局复杂度。

直接把按钮和文本放到同一个垂直flex容器里，用Bootstrap自带的间距类控制距离，就能实现响应式下一致的居中布局：

<div class="container-fluid" style="height: 75vh;">
    <!-- 单一flex容器，垂直排列+整体居中 -->
    <div class="h-100 d-flex flex-column justify-content-center align-items-center">
        <button type="button" class="btn btn-primary btn-xlarge btn-success mb-4" id="button1">
            Button!
        </button>
        <p id="p1" style="font-size: 24px;">Lorem Ipsum</p>
    </div>
</div>

关键说明： #

• flex-column：让flex容器内的元素垂直排列，按钮在上、文本在下
• justify-content-center + align-items-center：同时实现水平和垂直居中，替代你原来的两个独立容器
• mb-4：给按钮底部添加固定间距（Bootstrap的间距类基于rem单位，自动适配不同屏幕），你可以根据需求换成mb-3（更小）或mb-5（更大），也可以用mt-4给文本加顶部间距，效果一致
• 去掉了多余的grid和row容器，你的场景下完全不需要这些嵌套，只会增加冗余代码

这样修改后，不管在手机还是桌面端，按钮和文本的间距都会保持一致，布局逻辑也更清晰。

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