title: Align an image in the middle
body: <p>Im trying to align the image in the middle of the page, but its failing to do that. Currently, it's positioned on the very left side of <code>container</code>. React's render code:</p>
  
  <pre><code>return (
              &lt;div&gt;
                  &lt;div className="container"&gt;
                      &lt;div id="logo"&gt;
                          &lt;img src={require('../../images/vidn_logo.png')} /&gt;
                      &lt;/div&gt;
                      {heading}
                      &lt;form className="form-signin" onSubmit={this.formSubmit}&gt;
                          &lt;input onChange={this.setEmail} type="email" className="form-control"
                                 autoComplete="email" placeholder="Email" required&gt;&lt;/input&gt;
                          &lt;input onChange={this.setPass} type="password" className="form-control"
                                 autoComplete="new-password" placeholder="Password" required&gt;&lt;/input&gt;
                          &lt;button className="btn btn-lg btn-primary btn-block"
                                  type="submit" style={{marginTop: '20px'}}&gt;Log In&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;Footer /&gt;
              &lt;/div&gt;
          )
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
          width: auto;
          padding: 60px 0 100px;
      }
  #logo {
          margin-bottom: 50px;
          height: 30px;
      }
  </code></pre>
  
  <p>What should i add/edit in order the img was in the middle?</p>