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

一    
    
    
  、水平居中

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; 要设置宽高
















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