title: How to use add/subtract in css propert?
body: <p>How to add/subtract in css property?</p>
  
  <pre><code>#box {
    position: absolute;
    top: 50% ;
    left: calc(50% - 286px);
    margin-left: -75px /* half of the width */
    background-color: red; /* or something more useful */
    z-index:100;
  }
  </code></pre>
  
  <p>I am simply try to add/subtract the contents value in the actual top and left percentage </p>
  
  <pre><code>top: 50% - contents_height_in_number_with_px
  </code></pre>
  
  <p>I want to do this so that my main contents is automatically centered 
  Note:i already search on googled and already try calc() not found any solution</p>