title: Vertical CSS Positioning Divs Images
body: <p>I need to position 3 objects as follows:</p>
  
  <p>Div 1 is a absolute positioned container, with a fixed width, height and position. 
  Image 1 should be an absolute positioned image, with a fixed align left position only.
  Div 2 should be an absolute positioned div, with a fixed align left position only.</p>
  
  <p>I need Image 1 and Div 2 to align to the vertical center of div 1, as these are variable text and image elements with a dynamic height.</p>
  
  <p>Example:</p>
  
  <p>Div 1 is 200px high fixed.
  Image 1 is 52px high variable</p>
  
  <p>Image 1 should be vertically positoned:</p>
  
  <p>(200 / 2) + (52 / 2) = 126px</p>
  
  <p>I've looked into CSS table-cell, vertical-align, margin as % and others but was unable to get this working. </p>
  
  <p>Thanks.</p>
  
  <pre><code>.div1
  {
  position: absolute;
  width: 100px;
  height: 100px
  top: 100px;
  left: 100px;
  }
  .image1
  {
  position: absolute;
  left: 10px;
  // something here to align the image in the vertical middle of div1
  }
  .div2
  {
  position: absolute;
  left: 60px;
  // something here to align the image in the vertical middle of div1
  }
  
  &lt;div class="div1"&gt;&lt;img class="image1"&gt;&lt;div class="div2"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Updated code:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style type="text/css"&gt;
          .div1 {
              background: yellow;
              display: table;
              position: absolute;
              width: 300px;
              height: 300px;
              top: 100px;
              left: 100px;
          }
          .newdiv {
              display: table-cell; 
              vertical-align: middle;
              height: 300px;
          }
          .image1 {
              left: 10px;
              position: relative;  
              width:50px;
              height: 80px;
              background: blue;
          }
          .div2 {
              position: relative;   
              background: red;
              left: 70px;
              width: 100%;
              height: 200px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;div class="div1"&gt;&lt;div class="newdiv"&gt;&lt;div class="image1" /&gt;&lt;/div&gt;&lt;div class="div2"&gt;123&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>