不定宽高的水平垂直居中实现方式

对于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;
  }
}