Bootstrap中如何让垂直居中的按钮在页面高度变化时保持固定

根本原因 #

你当前使用的align-self-center是基于父级行容器（.row）的整体高度实现垂直居中，当同行另一列的折叠面板展开导致行容器总高度增加时，按钮会自动重新计算居中位置，因此出现向下偏移的问题。

解决方案 #

方案1：使用sticky定位（推荐，按钮始终在视口居中可见） #

通过粘性定位让按钮始终固定在视口垂直居中位置，初始加载对齐效果和原来一致，页面高度变化或滚动时都不会偏移：

<div class="col-sm-1" style="position: sticky; top: 50vh; transform: translateY(-50%);">
    <button class="btn btn-primary" type="button">Button</button>
</div>

这个方案不需要修改原有布局结构，兼容性覆盖绝大多数现代浏览器。

方案2：固定按钮父容器高度（按钮仅初始居中，后续位置完全固定） #

如果不需要按钮跟随滚动保持可见，只需要初始居中后就固定在原位，可以给按钮套一层高度固定的独立容器，让按钮只相对于这个容器居中，不受同行其他内容高度变化影响：

<div class="row">
    <div class="col-sm-1">
        <!-- 容器高度可根据你初始页面的高度调整，这里以整视口高度为例 -->
        <div style="height: 100vh;" class="d-flex align-items-center">
            <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
    <div class="col-sm-11">
        <!-- 此处放置你的可折叠面板等其他内容 -->
    </div>
</div>

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