css3: translateX для горизонтального центрирования элемента
Я пытаюсь центрировать элемент по горизонтали:jsfiddle
<div id="parent">
<div id="child">
</div>
На ребёнке у меня теперь есть следующий CSS, который не центрируется:
transform: translateX(50%);
К сожалению, 50% взято с #child, а не с родителя. Есть ли способ центрировать этот элемент с помощью преобразований (я знаю, что могу центрировать его с помощью, например, «слева»)?
Вот полный список 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;
}