CSS3：平移X到中心元件水平地

Question

我想水平居中元素：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;
}

Answer 1

你缺少父的位置相对，位置绝对对孩子和左侧和顶部的值，以帮助抵消了孩子。

但是，联四zxsw POI

http://jsfiddle.net/nA355/6/

Answer 2

你可以做到这一点的显示器挠性和证明内容为中心。

简单：

#parent {
    width: 300px;
    height: 100px;
    background-color: black;
    border: 1px solid grey;
    position: relative;
}
#child {
    position: absolute;
    height: 100px;
    width: 20px;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color:red;
}

http://jsfiddle.net/ugw9o3qp/1/

Answer 3

我使用这种技术水平对齐了一些要素情况下“文本对齐：中心;”不能正常工作。

#parent {
    display: flex;
    justify-content: center;
    width: 300px;
    height: 100px;
    background-color: black;
    border: 1px solid grey;
}
#child {
    height: 100px;
    width: 20px;
    background-color:red;
}

......“??”一直到这取决于元素有多宽进行调整。我知道它有点哈克，但似乎我已经试过了迄今在屏幕上工作。

在你的小提琴，应用这种技术，我得到：

 position:relative; 
 left:50%;
 transform:translateX(-??em) /*or -??px or other unit of measure */

这正好水平居中的孩子股利。