Bootstrap 4中无法将按钮在容器内成功居中的问题

别着急，这个问题我之前也碰到过，大概率是Bootstrap 4的row类特性在搞鬼！你现在的代码里，row自带左右负外边距，如果没把它放在正确的容器里，text-center的对齐效果就会被打乱。另外给按钮本身加text-center其实没必要，这个类是作用在父容器上来控制内部文本/行内元素对齐的。

给你两个靠谱的解决方案：

方案一：把row放进容器里 #

Bootstrap的row必须配合container或container-fluid使用，这样才能抵消row的负外边距，让text-center正常生效：

<div class="container">
  <div class="row text-center">
    <a class="btn btn-primary" href="{% url "users:postcode" %}">Get Started</a>
  </div>
</div>

方案二：用flex布局直接居中（更推荐） #

Bootstrap 4的row本身就是flex容器，直接用justify-content-center类就能让内部元素水平居中，不用依赖text-center，也不用纠结容器的问题：

<div class="row justify-content-center">
  <a class="btn btn-primary" href="{% url "users:postcode" %}">Get Started</a>
</div>

如果还是不行，记得检查一下有没有自定义CSS覆盖了row或btn的样式，比如给row加了float，或者给按钮加了float: left，这些都会破坏居中效果哦！

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