title: css3: translateX to center element horizontally
body: <p>I'm trying to center horizontally an element: <a href="http://jsfiddle.net/nA355/" rel="noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="child"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On the child I have now the following css which doesn't center:</p>
  
  <pre><code>transform: translateX(50%);
  </code></pre>
  
  <p>Unfortunately the 50% is taken from the #child and not the parent. Is there a way to center this element using transforms (I know I can center it using, for example 'left')?</p>
  
  <p>Here is the full listing of css</p>
  
  <pre><code>#parent {
      width: 300px
      height: 100px;
      background-color: black;
      border: 1px solid grey;
  }
  #child {
      height: 100px;
      width: 20px;
      -webkit-transform: translateX(50%);
      background-color:red;
  }
  </code></pre>