1. 已知宽度 margin:0 auto
   1 // css 2 .warp{ 3         width:720px; 4         margin: 0 auto; 5     } 6            8 //html 9  
          
           10     
           
            center
           
   11 
          
2. 负的margin

　　　　left:50%; margin:width/2

1 //css 2 .warp2{ 3             position: relative; 4             left:50%; 5             width:720px; 6             margin-left:-360px; 7             border: dashed 1px red; 8         } 9 10 //html11 
      
       12         
       
        
center
       
13     
      

 

• 自适应宽度,居中对齐

1. 外层position:absolute; left:50%;  内层position:relative; left:-50%;

　　　　　先用外层确定中间位置,内层向左移动一般,从而居中

1 //css 2 .warp3{ 3         /*position: absolute; 4         left:50%;*/ 5         float:left; 6         margin-left:50%; 7     } 8     .container3{ 9         position: relative;10         /*left:-50%;*/11         margin-left:-50%;12     }13         14 //html  15 
     
      16         
      
       17             
       
center
18         
      
19     
     

 

• 表格

1 //css 2 .warp4{ 3         display:table; 4         margin:0 auto; 5     } 6     .container4{ 7         display: table-cell; 8         text-align: center; 9     }10 11 //html12 
     
      13         
      
       14             
       
table center
15         
      
16     
     

• display:inline-block

　　　　内层设为inline-block; 外层直接用text-align:center;

1 //css 2 .warp5{ 3         text-align:center; 4     } 5     .container5{ 6         display:inline-block; 7     } 8  9 //html10 
     
      11         
      
       12             
       
inline-block center
13         
      
14     
     

 

参考链接