title: CSS % for vertical margin based on width instead of height
body: <p>I wish to create a margin above my accountOrderButton so it can be centred vertically. I am trying to calculate half of the height of the parent div minus half of the child divs height. </p>
  
  <p>This should center the button however the line 'margin-top: calc(50%);' in my CSS is returning the width of the parent div instead. How do I get the height?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="accountOrder"&gt;
      &lt;div id="accountOrderButton"&gt;
          Order Now!
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#accountOrder {
      width: 400px;
      float: left;
      height:100%;
      text-align: center;
  }
  #accountOrderButton {
      width: 100px;
      height: 20px;
      margin: 0 auto;
      margin-top: calc(50%);    &lt;---- returns width instead of height
      padding: 20px;
      background-color: &lt;?php echo $data['secondary_color']; ?&gt;;
      border-radius: 10px;
  }
  </code></pre>