对于CSS3开发而言,不定宽高的水平垂直居中是我们经常要用到得,实现方式也有很多,下面给大家介绍一下我在众多项目中的一些实现方案,希望对大家有所帮助。
方案一:
.wraper{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
方案二:
.wraper{
display:-webkit-flex;
justify-content:center; //水平居中
align-items:center; //垂直居中
}
方案三:
.detailTitle{ width:100%; font-weight: bold; min-height:@defaultHeaderHeight; background: #F5F5F5; display:table; span{ width:100%; display:table-cell; vertical-align:middle; line-height:1; font-size:@defaultTextSize - 5px; text-align: center; } }