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>
2、translate左、上分别移动-50%,此处是相对于div本身的宽、高进行移动的
上边两条综合可实现水平、垂直居中显示
原文:http://blog.csdn.net/comeonstone/article/details/45167589