css垂直居中的几种方法

<div class="app app1"><span>垂直居中的元素</span></div>

一：

.app1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

二：

.app2{

    display: flex;

    justify-content:center;

    align-items:Center;

}

三：

.app3{position:relative;}
.app3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

四：

.app4 span{

  width: 50%; 

  height: 50%; 

  background: #000;

  overflow: auto; 

  margin: auto; 

  position: absolute; 

  top: 0; left: 0; bottom: 0; right: 0; 

}

五：

.app5 span{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

六：

.app6{

  text-align:center;

  font-size:0;

}

.app6 span{

  vertical-align:middle;

  display:inline-block;

  font-size:16px;

}

.app6 :after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}

七：

.app7{

    display: flex;

    text-align: center;

}

.app7 span{margin: auto;}