html文字垂直居中的方法

1.table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        p{
            color: white;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <p>垂直居中</p>
        </div>
    </body>
</html>

 

 

2.margin-auto

.box  p{

         margin: auto;

}

 

 

3.display-flex

.box2{

     display: flex;      justify-content:center;      align-items:Center; }     4.display:inline-block .box{     text-align:center;     font-size:0; } .box p{      vertical-align:middle;      display:inline-block;      font-size:16px; } .box:after{       content:‘‘ ;       width:0;       height:100%;       display:inline-block;       vertical-align:middle; }     5.绝对定位负距离

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



6.绝对定位0
.box p{

        width: 50%;          height: 50%;          background:  red;         overflow: auto;          margin: auto;          position: absolute;          top: 0; left: 0; bottom: 0; right: 0;    }