title: How can i center objects without interfering the page when i resize
body: <p>I'm building an coming soon template, I inserted the title, counter and subscription form in the middle of the page.</p>
  
  <p>I used percentages to do that.</p>
  
  <pre><code>#line{
      display: table;
      margin: 0 auto;
      margin-top: -20px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>The problem is that the centered objects are being overlepped when i resize the page from the bottom to the top:</p>
  
  <p><img src="https://i.stack.imgur.com/PLNH4.png" alt="http://i.imgur.com/ZyGLXqm.png"></p>
  
  <p>Is there any way to put the divs at the middle without using percentages? I tried to use Max-height but it didn't work.</p>
  
  <p>Thank you.</p>