title: How should i center horizontally a div without width?
body: <p>I'm still very new to CSS, but I tried different solutions on stackoverflow, but none seems to work. </p>
  
  <p>Here is the parent div : (existing application, so i can't control the inline style, hence the use of !important)</p>
  
  <pre><code>element.style {
      display: block;
      height: 662px;
      width: 1460px;
  }
  #ModalScroll{
      position:fixed !important;
      top:0;
      left:0;
      z-index:1001; 
      height:1px;
      width:1px;
      overflow:hidden;
      display:none;
      font-size:100%;
      text-align:center;
  }
  </code></pre>
  
  <p>Child div :</p>
  
  <pre><code>element.style {
      display: block;
      left: 470px;
      margin-top: 150.5px;
      top: 315px;
      width: 500px;
  }
  
  .ModalDialog{
      border:1px solid #3C4749;
      background-color:#FFF;
      margin:0 auto 0 auto;
      display:none;
      position:absolute !important;
      font-size: 12px;
      top: 0px !important;
      box-sizing: border-box; 
      text-align: center; 
      vertical-align: middle;
  </code></pre>
  
  <p>The div can have different widths, it's perfectly centered vertically but i can't do it horizontally.</p>