我试图水平居中一个元素:jsfiddle
<div id="parent">
<div id="child">
</div>
在孩子上,我现在有以下不居中的css:
transform: translateX(50%);
不幸的是,50%是从#子代而非父代获得的。有没有一种方法可以使用变换将这个元素居中(我知道我可以使用例如"left"将其居中)?
以下是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;
}
您缺少父级上的相对位置、子级上的绝对位置以及帮助偏移子级的左侧和顶部值。
演示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;
}
您可以通过显示flex来实现,并证明内容是中心的。
示例: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;
}
如果您不想设置子元素的宽度
#child {
display: flex;
justify-content: center;
}
在"text-align:center;"无法正常工作的情况下,我使用此技术来水平对齐一些元素。
position:relative;
left:50%;
transform:translateX(-??em) /*or -??px or other unit of measure */
"??"必须根据元素的宽度进行调整。我知道它有点过时,但似乎在我迄今为止尝试过的屏幕上有效。
在你的小提琴里,应用这种技术,我得到:
#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;
}
这正好使子div水平居中。