为什么我不能居中？

Question

<h2 class="mt-4 ml-4">{% trans "Contact Me" %}</h2>
<form method="post">
<div class="container mt-4">
    {% csrf_token %}
   <div class="col-md-4 mb-2">
        {% trans "Subject" %}
        {% render_field form.subject class+="form-control" %}
   </div>
   <div class="col-md-4 mb-2">
        E-mail
        {% render_field form.email type="email" class+="form-control" %}
   </div>
   <div class="col-md-4 mb-2">
           {% trans "Message" %}
        {% render_field form.message class+="form-control" rows="4" cols="6" %}
   </div>
   <div class="form-actions">
      <button type="submit" class="btn btn-primary mt-2 ml-3">{% trans "Send" %}</button>
   </div>
</div>
</form>

如果我这样做：

form {
    margin-left:auto;
    margin-right:auto;
    width:200px;
}

或

form {
        margin: auto;
        width:600px;
}

我明白了：

如何解决这个问题？

别看它：dlfjklgljdfsg kdffg fdjgl hfgdg，hfsdfgh kldfhhj ghg

Answer 1

.container{
  display:flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <h2>Contact Me</h2>
  <form method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit"> 
  </form>
</div>

Answer 2

您是否尝试过text-align：center;？

div {
  height: 900px;
  text-align:center;
}

<div>
  test
  <br>
  <input type="text">
  <br>
  test
      <br>

  <textarea> </textarea>
    <br>
test
    <br>

<button> test </button>
</div>