title: python flask: how to align the form in the center
body: <p>Hi I want to put the login form in the login.html which created by 'bootstrap/wtf.html. But the form of username password et al aligned left as the following image. I want to put the form in the center.</p>
  
  <p><a href="https://i.stack.imgur.com/wue9d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wue9d.png" alt="login image"></a></p>
  
  <p>The code is following:</p>
  
  <pre><code>    {% extends "common/base.html" %}
  
  {% import 'bootstrap/wtf.html' as wtf %}
  {#{% import "macros/_patination.html" as page_macros %}#}
  
  {#&lt;link rel="stylesheet" href="/static/style.css" type="text/css"&gt;#}
  
  {% block content %}
  &lt;div class = "main-login"&gt;
  
      &lt;h1&gt;{{ _('Sign In') }}&lt;/h1&gt;
      &lt;div class="main-form"&gt;
          &lt;div class="col-md-4"&gt;
              {{ wtf.quick_form(form) }}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;p&gt;{{ _('New User?') }} &lt;a href="{{ url_for('auth.register') }}"&gt;{{ _('Click to Register!') }}&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;
          {{ _('Forgot Your Password?') }}
          &lt;a href="{{ url_for('auth.reset_password_request') }}"&gt;{{ _('Click to Reset It') }}&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p>and css style code:</p>
  
  <pre><code>.main-login{
    padding-top: 100px;
    text-align: center;
  }
  .main-form{
    /*padding-top: 100px;*/
    text-align: center;
    /*display: inline-block;*/
  }
  </code></pre>