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; 
  }
 
posted @ 2021-04-21 17:34  hapuluosi  阅读(1937)  评论(0)    收藏  举报