html - 表格无法居中和最大宽度

Question

我有一个表格，我想在一个 div 中居中，但也应用一个最大宽度

这是我所拥有的：

HTML：

  <div class="site-section mb-5">
    <div class="container">
     <div class="form-register">
       <form method="POST">
           {% csrf_token %}
               <legend>Join Today</legend>
               {{ form|crispy }}
               <button class="btn btn-outline-info" type="submit">Sign Up</button>
       </form>
     </div>
      <p class="p-center">Already Have An Account? <a class="ml-2" href="{% url 'login' %}">Sign In</a>
          </p>
    </div>
  </div>

CSS：

.form-register {
  display: inline;
  margin: 0 auto;
}

form {
  width: 80%;
  max-width: 300px;
  display: inline;
  margin: 0 auto;
}

但是，如果我在两个 CSS 类之间切换widthand max-width，我会得到以下任一结果：

或者

标签： htmlcssdjango