Bootstrap按钮不按预期居中

Question

我的Bootstrap网格中有这个专栏：

<div class=col-sm-2>
    <div class="w-75 mx-auto">
        <br><a class='button btn btn-outline-dark' href='{% url "elections:new_post" %}'>New Post</a><br><br>
        <a class='button btn btn-outline-dark' href='{% url "elections:new_image" %}'>New Image</a><br><br>
        <div class='card'>
            <div class='card-body'>
                <p>Test</p>
            </div>
        </div>
    </div>
</div>

由于mx-auto，我希望这些div标签中的所有内容都居中，但按钮固定在左边距，卡片和卡片内的文字也是如此。

如何将按钮和卡对中？