css3: translateX do środka elementu w poziomie
Próbuję wyśrodkować poziomo element:jsfiddle
<div id="parent">
<div id="child">
</div>
Na dziecku mam teraz następujące css, które nie centruje:
transform: translateX(50%);
Niestety 50% jest pobierane z # dziecka, a nie z rodzica. Czy istnieje sposób na wyśrodkowanie tego elementu za pomocą transformacji (wiem, że mogę go wyśrodkować, na przykład „lewo”)?
Oto pełna lista 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;
}