为什么我不能居中这个表格？答案

【问题标题】：Why I can't center this form?为什么我不能居中这个表格？
【发布时间】：2019-06-26 23:07:48
【问题描述】：

<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

【问题讨论】：

控制表单元素的其他 CSS 呢？表单中的所有内容都包含在一个带有“container”和“mt-4”类的 div 中。您可以尝试修改它们。还要检查“col-md-4”和“mb-2”。所有这些类都在影响表单的显示方式。

标签： html css twitter-bootstrap styles

【解决方案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>

【讨论】：

你如何使按钮居中？

【解决方案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>

【讨论】：

不，它不居中输入