元素水平垂直居中小结

table方法：

 

  
    

   
     
   
     <
   
     body
   
     >
   
     
 
   
     <
   
     div 
   
     style
   
     ="display: table; border: 1px solid red; width: 800px; height: 800px;"
   
     >
   
     
 
   
     <
   
     div 
   
     style
   
     ="display: table-cell; vertical-align: middle; margin: 0 auto"
   
     >
   
     
 
   
     <
   
     div 
   
     style
   
     ="border: 1px solid orange; width: 500px; height: 500px; margin: 0 auto;"
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     

   
     </
   
     body
   
     >
  
    

 

 

position方法：

 

  
    

   
     
   
     <
   
     div 
   
     id
   
     ="div1"
   
      style
   
     ="width: 500px; height: 500px; border: 1px solid #f00; position: relative;"
   
     >
   
     
 
   
     <
   
     div 
   
     id
   
     ="div2"
   
      style
   
     ="width: 200px; height: 200px; border: 1px solid #000; position: absolute;
 top: 50%; left: 50%; margin: -100px 0 0 -100px;"
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     

   
     </
   
     div
   
     >
  
    

 

在body中居中：

  
    

   
     
   
     <
   
     body
   
     >
   
     

   
     <
   
     div 
   
     style
   
     ="border:1px red solid; width:100px; height:100px; top: 50%; left: 50%; position: absolute; margin: -50px 0 0 -50px;"
   
     ></
   
     div
   
     >
   
     

   
     </
   
     body
   
     >