title: Maintain aspect ratio and position relative to parent
body: <p>I'm trying to get an element inside a variably sized parent to be both square, and positioned at the left and centred vertically. I would prefer to do this in CSS only and avoid javascript.</p>
  
  <p>This produces a box of the correct width and horizontally the correct position (10% from left), but it fills the height of its parent. <a href="http://jsfiddle.net/6tvsmLnp/" rel="nofollow">http://jsfiddle.net/6tvsmLnp/</a></p>
  
  <pre><code>&lt;div id="d1"&gt;
    &lt;div id="d2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;style type="text/css"&gt;
  *
  {
      margin:0;padding:0;
  }
  
  div#d1
  {
      width: 90vw; 
      height: 50.625vw;
      background: pink;
      max-height: 90vh;
      max-width: 177.78vh;
      margin: auto;
      position: absolute;
      top:0;bottom:0;
      left:0;right:0;
  }
  div#d2
  {
      background: blue;
      width:10%;
      top: 0;
      bottom: 0;
      left: 10%;
      position:absolute;
      margin:auto;
  }
  #d2:before{
      content: "";
      display: inline-block;
      padding-top: 100%;  /* initial ratio of 1:1*/
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Changing the <code>position</code> of <code>#d2</code> to relative makes it the desired size and aspect ratio, but is postioned at the top and to the right of center of its parent. <a href="http://jsfiddle.net/ozu6c4eo/1/" rel="nofollow">http://jsfiddle.net/ozu6c4eo/1/</a></p>
  
  <pre><code>&lt;div id="d1"&gt;
    &lt;div id="d2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;style type="text/css"&gt;
  *
  {
      margin:0;padding:0;
  }
  
  div#d1
  {
      width: 90vw; 
      height: 50.625vw;
      background: pink;
      max-height: 90vh;
      max-width: 177.78vh;
      margin: auto;
      position: absolute;
      top:0;bottom:0;
      left:0;right:0;
  }
  div#d2
  {
      background: blue;
      width:10%;
      top: 0;
      bottom: 0;
      left: 10%;
      position:relative;
      margin:auto;
  }
  #d2:before{
      content: "";
      display: inline-block;
      padding-top: 100%;  /* initial ratio of 1:1*/
  }
  &lt;/style&gt;
  </code></pre>