title: Centering modal in twitter-bootstrap
body: <p>I can't center my modal in twitter-bootstrap with various sizes. You can see live example <a href="http://makeshot.net/v/97dcd3c" rel="noreferrer">here</a>  and <a href="http://makeshot.net/v/3f467c0" rel="noreferrer">here</a>. (just click on the picture or "Report this image"). You'll see that modal is there working like charm, but it isn't horizontally centered. I tried everything: margins, float, text-align and even <code>&lt;center&gt;</code></p>
  
  <p>.modal:</p>
  
  <pre><code>.modal {
        position: fixed;
        top: 10%;
        z-index: 1050;
        width: auto;
        background-color: #ffffff;
        border: 1px solid #999;
        border: 1px solid rgba(0, 0, 0, 0.3);
        *border: 1px solid #999;
        -webkit-border-radius: 6px;
           -moz-border-radius: 6px;
                border-radius: 6px;
        outline: none;
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
           -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
                box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -webkit-background-clip: padding-box;
           -moz-background-clip: padding-box;
                background-clip: padding-box;
      }
  </code></pre>
  
  <p>.modal-body:</p>
  
  <pre><code>.modal-body {
   margin: 0 auto 0 auto;
    position: relative;
    padding: 15px;
    overflow-y: auto;
  }
  </code></pre>