Summary and sharing of CSS layout tips

Single Row layout

Center horizontally

1. parent element Text-align:center; child element: Inline-block;

• Advantages: good compatibility;

• Insufficient: You need to set both child and parent elements

  <! DOCTYPE html>

1. child element margin:0 Auto;

• Pros: Good compatibility

• Disadvantage: You need to specify a width

<! DOCTYPE html>

 

 
  
 
   
Child element {display:table;margin:0 Auto;}
 
  

 

 

 
  
 
   
Pros: Only need to set itself
 
   
Insufficient: ie6,7 need to adjust structure
 
  

 
<! DOCTYPE html>

  

 
   
 
    
Parent element: relative; child element: half of absolute;left:50%;margin-left:-width
 
   

  

  

 
   
 
    
Pros: Good compatibility
 
    
Cons: Need to know the width of child elements
 
   

  
<! DOCTYPE html>

   

 
    
 
     
Parent element: relative; child element: Absolute;left:50%;transform:translate ( -50%,0);
 
    

   

   

 
    
 
     
Pros: Poor compatibility
 
     
Cons: You don't need to know the width of child elements
 
    

   
<! DOCTYPE html>

    

 
     
 
      
Elastic box: Parent element: Display:flex;justify-content:center;
 
     

    

    

 
     
 
      
Advantages: Simple
 
      
Cons: Poor compatibility
<! DOCTYPE html>
 
     

    
Center vertically


    

 
     
 
      
Vertical-align:center;
 
     

    
<! DOCTYPE html>
<! DOCTYPE html>

      

 
       
 
        
 
 Parent element: position:relative; child element: Positon:absolute;top:50%;transform:translate ( 0,-50%); 
 
 
       

      
<! DOCTYPE html>

       

 
        
 
         
Parent element: position:relative; child element: Half of the height of the positon:absolute;top:50%;margin-top:-child element;
 
         
Parent element: Display:flex;align-items:center;
 
        

       
<! DOCTYPE html>
Horizontal Vertical Center


        

 
         
 
          
Parent element: Display:table-cell;vertical-align:middle;text-align:center;
child elements; display:inline-block;
 
         

        
<! DOCTYPE html>

         

 
          
 
           
 
 Parent element: position:relative; 
 Child element: Position:absolute