title: Responsive diamond shape with center aligned content using transform rotate
body: <p>I am having great difficulties trying to create a centered, responsive diamond shape in the center of a 100% x 100% container, with the diamond containing a center aligned logo. Sound confusing? Well, this is what I mean:</p>
  
  <p>(images are self-drawn graphics)</p>
  
  <p><img src="https://i.stack.imgur.com/RvYVQ.jpg" alt="enter image description here"></p>
  
  <p>I have managed to get the responsive diamond shape working fine and is centered in the window using this:</p>
  
  <pre><code>.cover-diamond {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 25%;
      height: 0;
      padding-bottom: 25%;
      border: solid 1px #EBC65A;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  </code></pre>
  
  <p>But feeling rather suicidal after attempting to center the <code>&lt;img&gt;</code> logo in the middle, as this is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/JTQqF.jpg" alt="enter image description here"></p>
  
  <p>I have tried many variations and have totally lost track of what I have tried. I tried <code>display:table-cell</code> and <code>vertical-align:middle</code> What is the correct way to do this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>A couple of concerns is that fact I am using an 80% wide image with an unknown height and the fact the sqaure (diamond now) has an unknown height too, because of the 25% bottom padding.</p>
  
  <p>Please <a href="http://jsfiddle.net/3Ldqyjut/" rel="nofollow noreferrer">take a look at my fiddle</a>.</p>