本文介绍了一种使用CSS3的translate属性实现未知尺寸元素在父容器内水平和垂直居中的方法，这种方法适用于元素尺寸不固定的场景。
常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和
margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了,
还好css3里面的translate给了我们很大的方便呀
<body>
<div class='box'>
<div class='content'>
未知高度宽度水平、垂直居中
</div>
</div>
</body>
.box{
width:200px;
height:200px;
background-color:red;
position:relative;
}
.content{
width:90px;
height:90px;
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%);
}
margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了,
还好css3里面的translate给了我们很大的方便呀
<body>
<div class='box'>
<div class='content'>
未知高度宽度水平、垂直居中
</div>
</div>
</body>
.box{
width:200px;
height:200px;
background-color:red;
position:relative;
}
.content{
width:90px;
height:90px;
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%);
}
扫一扫
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
