Bootstrap下拉菜单无法在按钮下方居中，当前左对齐如何解决？

Bootstrap原生没有默认的下拉菜单居中对齐类，可通过以下两种方式实现需求： #

方式1：自定义CSS兼容所有Bootstrap版本 #

核心思路是禁用Popper的动态定位逻辑，手动通过定位属性实现水平居中：

• 给下拉菜单的父容器.role_select添加相对定位，作为下拉菜单的定位参考基准
• 给下拉菜单添加水平偏移属性实现居中，同时添加data-bs-display="static"属性，避免Popper的动态计算覆盖自定义样式

修改后的CSS代码 #

.role_select {
    margin: auto;
    position: relative; /* 新增定位父级 */
}

#role_select > div {
    margin-top: 5%;
}

ul[aria-labelledby="dropdownMenuButton1"] > li {
    text-align: center;
}

ul[aria-labelledby="dropdownMenuButton1"] {
    border: 2px solid red;
    left: 50%;
    transform: translateX(-50%); /* 水平居中偏移 */
}

修改后的HTML代码 #

<div class="role_select">
    <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        Select Role
    </button>

    <!-- 新增data-bs-display="static"属性 -->
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" data-bs-display="static">
        <li @click="id_drop(0)">MT-Almighty</li>
        <li @click="id_drop(1)">ST-Almighty</li>
    </ul>
</div>

方式2：Bootstrap 5.3+ 原生内置类实现 #

如果你使用的是5.3及以上版本的Bootstrap，框架已经内置了居中类，直接给下拉菜单的ul添加dropdown-menu-center类即可实现效果，无需额外写自定义CSS：

<ul class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenuButton1">

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