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

Posted 2022-06-10 天外野草

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