title: css how can i center multiple elements with absolute position
body: <p>How do i group all the elements which have absolute position and center all of them together inside a parent div? i also will be adding and removing each element using jquery and want them to be centered automatically. 
  So in my jsfiddle example, i want to group all three cards and center them together. Thank you.</p>
  
  <p><a href="https://jsfiddle.net/ksha09jk/2/" rel="nofollow">https://jsfiddle.net/ksha09jk/2/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class='wrap'&gt;
    &lt;li class='card card1'&gt;Q&lt;/li&gt;
    &lt;li class='card card2'&gt;K&lt;/li&gt;
    &lt;li class='card card3'&gt;A&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.wrap{
    position: relative;
    height: 100px;
    background-color: green;
  }
  .card{
    width: 43px;
    height: 60px;
    border:1px solid black;
    border-radius: 5px;
    display: inline-block;
    background-color: white;
  }
  .card1{
    position: absolute;
    top:15px;
    left: 0px;
  }
  .card2{
    position: absolute;
    top:15px;
    left: 30px;
  }
  .card3{
    position: absolute;
    top:15px;
    left: 60px;
  }
  </code></pre>