通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和
margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了,
还好css3里面的translate给了我们很大的方便呀2333
html file:
<body>
<div class='parentelement'>
<div class='childelement'>
想让子元素在父元素内水平、垂直居中
</div>
</div>
</body>
css file:
.parentelement{
width:200px;
height:200px;
background-color:red;
position:relative;
}
.childelement{
width:50%;
height:50%;
background-color:green;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
