css3: translateX para centrar el elemento horizontalmente
Estoy tratando de centrar horizontalmente un elemento:jsfiddle
<div id="parent">
<div id="child">
</div>
En el niño tengo ahora el siguiente css que no se centra:
transform: translateX(50%);
Desafortunadamente, el 50% se toma del #child y no del padre. ¿Hay alguna forma de centrar este elemento utilizando transformaciones (sé que puedo centrarlo utilizando, por ejemplo, 'izquierda')?
Aquí está la lista completa de css
#parent {
width: 300px
height: 100px;
background-color: black;
border: 1px solid grey;
}
#child {
height: 100px;
width: 20px;
-webkit-transform: translateX(50%);
background-color:red;
}