前端

html文字垂直居中的方法

云博小周宇2 Mins Read

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