前端水平居中的几种方式（前端技术中的几种居中方式）

一    
    
    
    
、水平居中

1


     


     


     


 、使用margin:0px auto可以使盒子水平居中    
    
    
    
，但要设置宽度    
    
    
 。

2
 




 




 




 、在父元素中使用text-align:center可以将子元素设置水平居中


     


     


     


 ，但子元素必须为行内元素或行内块元素     


     


     


     。

3   

   

   

   

、使用绝对定位
 




 




 




 ，父相子绝的原则   

   

   

   

，在子元素中设置left:50%和transform:translateX(-50%)




 




 




 




。可以不设置宽高
   

   

   

。

      这里的left:50%是将子元素的左边缘线紧贴在父元素的中线 

     

     

     

，transform:translateX(-50%)是将子元素向左移动其自身宽度的一半     

     

     

     。

二 

     

     

     

、垂直居中

1

  




  




  




  、使用绝对定位

  




  




  




  ，父相子绝的原则  


  


  


  

，在子元素中设置top:50%和transform:translateY(-50%) 




  




  




  



。可以不设置宽高

  


  


  


。

      这里的top:50%是将子元素的上边缘线紧贴在父元素的中线  
     
     
     
，transform:translateY(-50%)是将子元素向上移动其自身高度的一半     
     
     
    。

2  


  


  


  

、将父元素设置为display:table-cell


   




   




   




  ，并设置vertical-align: middle 



 



 



 

，要设置宽高  




   




   




   


。子元素要是行内元素或行内块元素


 



 



 



。

3  
     
     
     
、要想使文字垂直居中                  ，最简单的方式是将行高line-height的值设置为元素的高度一样的值                  。

三


   




   




   




  、水平垂直居中

1 



 



 



 

、使用绝对定位



    




    




    




  ，父相子绝的原则
















，在子元素中设置left:50%;top:50%和transform:translateX(-50%) translateY(-50%)   




    




    




    

。可以不设置宽高


















。(推荐使用)

2                  、使用flex布局时                   ，在父元素中设置display:flex; align-items: center; justify-content: center;可以使子元素水平垂直居中                 。

     align-items用于控制弹性盒的纵轴（即垂直方向）上的对齐方式



     



     



     



  ，justify-content用于控制横轴（即水平方向）上的对齐方式    



     



     



     
。

3



    




    




    




  、将父元素设置为display:table-cell















，并设置vertical-align: middle; text-align:center; 要设置宽高



















。子元素要是行内元素或行内块元素    
    
    
 。