Почему я не могу центрировать эту форму?

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

Вы пробовали выравнивание текста: по центру?? 1001 *

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

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

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

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