Html 使用Twitter引导将列居中不起作用

我有一个简单的注册框，我想在屏幕上水平居中。 我使用twitter引导4.5。问题是，长方体始终渲染在屏幕左侧附近，忽略了将其水平居中的每次尝试。我通过添加类justify content center来尝试使用手册中的示例，我在col div上尝试了mx auto，甚至在margin left和margin right设置为auto的情况下也尝试了手动使用，但没有任何效果。我有一个不同的网站，在那里我使用了完全相同的策略，它在那里工作-唯一的区别是我在那里使用了Bootstrap4.0。你能帮帮我吗？即使删除所有内部html并只打印一个简单的“Hello”，它也不起作用

我非常感谢您提出的任何问题，非常感谢

<div class="container">
  <div class="row justify-content-center">
    <div class="col mx-auto">
      <div class="card" style="width: 18rem;">
        <div class="card-header">
          <h4 class="mb-0">Register</h4>
        </div>
        <div class="card-body">

          <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">

            <div [hidden]="formDir.submitted && heroForm.valid">

              <div class="cross-validation"
                [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
                <div class="form-group">
                  <label for="name">User Name</label>
                  <input id="username" type="text" class="form-control" formControlName="username" required>
                  <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                    <div *ngIf="username.errors.required">
                      Name is required.
                    </div>
                    <div *ngIf="username.errors.minlength">
                      Name must be at least 4 characters long.
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="name">Email</label>
                  <input id="email" type="email" class="form-control" formControlName="email" required>
                  <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="email.errors.required">
                      Email is required.
                    </div>
                    <div *ngIf="email.errors.email">
                      You must enter a valid email address
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="password">Password</label>
                  <input id="password" type="password" class="form-control" formControlName="password" required>
                  <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="password.errors.required">
                      Password is required.
                    </div>
                    <div *ngIf="password.errors.minlength">
                      Password must be at least 4 characters long.
                    </div>
                  </div>
                </div>
              </div>

              <button class="button" type="submit" >Register</button>
            </div>
          </form>

          <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">
            <p>You've registered your with user {{ heroForm.value.username }}!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

登记
用户名
名称是必需的。
名称的长度必须至少为4个字符。
电子邮件
电子邮件是必需的。
您必须输入有效的电子邮件地址
密码
密码是必需的。
密码长度必须至少为4个字符。
登记
您已经向用户{{heroForm.value.username}注册了

一切都很完美，但需要一点
css
，
bootstrap
不会帮助您集中
div的内容

在
行
类中，我添加了这个css属性

display: table; margin: 0 auto;



登记
用户名
名称是必需的。
名称的长度必须至少为4个字符。
电子邮件
电子邮件是必需的。
您必须输入有效的电子邮件地址
密码
密码是必需的。
密码长度必须至少为4个字符。
登记
您已经向用户{{heroForm.value.username}注册了

我发现了问题：我将左边距和右边距自动放置在card div上，然后它工作了。