Html css3：translateX 水平居中元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20538718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3: translateX to center element horizontally
提问by Jeanluca Scaljeri
I'm trying to center horizontally an element: jsfiddle
我试图水平居中一个元素：jsfiddle
<div id="parent">
<div id="child">
</div>
On the child I have now the following css which doesn't center:
在孩子身上，我现在有以下不居中的 css：
transform: translateX(50%);
Unfortunately the 50% is taken from the #child and not the parent. Is there a way to center this element using transforms (I know I can center it using, for example 'left')?
不幸的是，50% 取自 #child 而不是父级。有没有办法使用转换来居中这个元素（我知道我可以使用例如'left'来居中）？
Here is the full listing of css
这是 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;
}
回答by 2ne
You were missing a position relative on your parent, position absolute on the child and the left and top values to help offset the child.
您缺少父级的相对位置、子级的绝对位置以及左侧和顶部值以帮助抵消子级。
DEMO http://jsfiddle.net/nA355/6/
演示http://jsfiddle.net/nA355/6/
#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;
}
回答by Akegvd
you can do it on display flex and justify-content is center.
你可以在 display flex 上做， justify-content 是中心。
simple: http://jsfiddle.net/ugw9o3qp/1/
简单：http: //jsfiddle.net/ugw9o3qp/1/
#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;
}
回答by whitebeard
I use this technique to horizontally align some elements in situations where "text-align:center;" does not work correctly.
我使用这种技术在“text-align:center;”的情况下水平对齐一些元素。不能正常工作。
position:relative;
left:50%;
transform:translateX(-??em) /*or -??px or other unit of measure */
... "??" has to be tweaked depending on how wide the element is. I know it's kinda hacky, but seems to work on the screens I've tried it on so far.
……“？？” 必须根据元素的宽度进行调整。我知道这有点 hacky，但似乎在我迄今为止尝试过的屏幕上工作。
In your fiddle, applying this technique, I get:
在你的小提琴中，应用这种技术，我得到：
#parent {
width: 300px
height: 100px;
background-color: black;
border: 1px solid grey;
}
#child {
position:relative;
height: 100px;
width: 20px;
left:50%;
transform: translateX(-10px); /*or transform: translateX(-50%);*/
-webkit-transform: translateX(-10px);/*or -webkit-transform: translateX(-50%); */
-ms-transform: translateX(-10px);/*or -ms-transform: translateX(-50%);*/
background-color:red;
}
which exactly centers the child div horizontally.
这恰好使子 div 水平居中。
