如何实现文本量不同的Bootstrap 5按钮尺寸统一？

方案一：自定义Flex布局CSS #

给你的按钮类添加flex布局属性，这样就算设置固定高度，内部文本也能自动保持垂直水平居中，同时统一所有按钮尺寸：

.btn-warning {
    background: #e6deca;
    color: #000;
    border-color: #e6deca; /* 修正原代码border属性写法错误 */
    padding: 2rem;
    border-radius: 50px;
    width: 280px;
    /* 核心：用flex实现文本居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 设置固定高度统一尺寸，也可以用min-height保留自适应空间 */
    height: 180px;
    text-align: center;
}

如果想兼顾响应式灵活性，把height换成min-height，这样内容极少的按钮保持统一最小高度，内容过多的按钮会自动适配高度。

方案二：用Bootstrap 5自带工具类 #

直接借助Bootstrap的内置flex工具类，不用额外写大量自定义CSS：

<button class="btn btn-warning d-flex align-items-center justify-content-center" style="width: 280px; height: 180px;">
    按钮文本<br>支持换行
</button>

关键提醒 #

• 原代码里border: #e6deca是错误写法，正确应该指定边框样式，比如border: 1px solid #e6deca或者单独设置border-color。
• 响应式场景下，可根据屏幕尺寸调整按钮的宽高（比如用Bootstrap的响应式类w-md-100或者媒体查询），避免小屏幕上文本溢出。

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