title: Modal not centering on screen, css
body: <p>I am having some problem centering a modal, when i am using serverel modals on the same page.</p>
  
  <p>So whenever i press the button within the circle, the modal opens. On the page there are 6 modals, each with unique ID's of course.</p>
  
  <p>On the image below, you see that the first model is centeret - simply using hacks for this.</p>
  
  <p><img src="https://i.stack.imgur.com/Qh4Ir.png" alt="enter image description here"></p>
  
  <p>However when i press another model to pop-up, it is not centered as seen below:</p>
  
  <p><img src="https://i.stack.imgur.com/qs0Mv.png" alt="enter image description here"></p>
  
  <p>So as i see it, the javascript doesn't take into account the width of the screen or something like that.</p>
  
  <p>The following is the CSS for the modal:</p>
  
  <pre><code>element {
      opacity: 1;
      visibility: visible;
      left: 50%;
  }
  .reveal-modal {
      top: -180px !important;
      width: 750px;
      background: url("modal-gloss.png") no-repeat scroll -200px -80px #EEE;
      position: absolute;
      z-index: 101;
      padding: 30px 40px 34px;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>As you can see, i am using percentages, however the problem still occurs. What is it, that is going wrong with this modal, since it doesn't center all the modals?</p>