1、Css3使用translate属性,使不知道宽度、高度的元素实现水平、垂直居中
Css3代码:
.wrapper{
padding:20px;
background: orange;
color: #fff;
position: absolute;
top:50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-transform:translate(-50%,-50%);
}
Html代码:
<div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中</div>
讲解:1、将div设置为绝对定位,并位于窗口的top:50%;left:50%处,
2、translate左、上分别移动-50%,此处是相对于div本身的宽、高进行移动的
上边两条综合可实现水平、垂直居中显示