Ich versuche ein Element horizontal zu zentrieren:jsfiddle

<div id="parent">
    <div id="child">
</div>

Auf dem Kind habe ich jetzt das folgende CSS, das nicht zentriert:

transform: translateX(50%);

Leider stammen die 50% vom #Kind und nicht vom Elternteil. Gibt es eine Möglichkeit, dieses Element mithilfe von Transformationen zu zentrieren (ich weiß, dass ich es mithilfe von beispielsweise 'left' zentrieren kann)?

Hier ist die vollständige Liste der 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;
}