title: Vertically and horizontally centering container and content in container
body: <p>I am trying to vertically and horizontally center a container, and the content inside using CSS.</p>
  
  <p>The markup looks like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;img src="..someimage.jpg"&gt;
    &lt;img src="..someverticaldivider"&gt;
    &lt;form action="action.php"&gt;
      &lt;input type="text"&gt;
      .... (other inputs)
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need the end result to look like this:
  <img src="https://i.stack.imgur.com/toCmV.png" alt="result"></p>
  
  <p>So far, my css looks like this:</p>
  
  <pre><code>#content{
       position:absolute;
       width: 900px; 
       left:50%;
       top:50%;
       height:300px;
       margin-top:-150px;
       margin-left: -450px; 
  
  }
  </code></pre>
  
  <p>That works fine and if I add a border to <code>#content</code>, I can easily see that it is indeed centered horizontally and vertically.</p>
  
  <p>The problem I am facing is that I do not know the size of the content inside <code>#content</code>. I need to be able to align those elements 2 images and 1 form horizontally and vertically. I have checked out <a href="http://phrogz.net/css/vertical-align/index.html" rel="nofollow noreferrer">this site</a> for vertically centering, but the problem is that I do not know the size of my content, and the content is not only text.</p>
  
  <p>What is the best way to do this with support for older browsers (IE7 and up)?</p>