title: Using calc() on repsonsive width to center element
body: <p>Is it possible to use calc() to center an element, which has a width defined with % ?</p>
  
  <p>e.g.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 100%;
    background-color: black;
    height: 300px;
    position: absolute;
    top: 0;
  }
  .inside {
    width: 100%;
    margin-left: 30px;
    background-color: yellow;
    height: 250px;
    margin: 20px;
  }
  .inside h1 {
    width: 30%;
    background-color: white;
    text-align: center;
  }
  .inside h1 {
    position: absolute;
    left: calc(50% - 15%);
    left: -webkit-calc(50% - 15%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="inside"&gt;
      &lt;h1&gt;CENTERED to viewport&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/3SpCN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3SpCN.jpg" alt="slider"></a></p>
  
  <p>This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
  The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.</p>
  
  <p>Maybe now it is a bit more clear, why I tried what I tried.</p>