浅谈css处理水平居中的问题

1、水平居中设置-行内元素

通过父元素设置 1 text-align:center; ，让父元素的内容居中

2、水平居中设置-定宽块状元素

块状元素的宽度width为固定值，通过设置“左右margin”值为“auto”来实现居中的

例子：

1.     
2.     
3.     
4.     
5.     
6.     
7. div{    
8.     width: 200px;    
9.     margin: 20px auto;    
10.     border: 1px solid red;    
11. }    
12.     
13.     
14.     
15. 我是定宽块状元素，我要水平居中显示。    
16.     
17.   

3、水平居中设置-不定宽块状元素
 
方法1. 加入 table 标签

例子：

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
     
     
       
     
     
     

   我要水平居中

     
10.   
11.   
12.   

方法2. 设置 display:inline; 方法，与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

例子：

1.   
2.   
3.   
4.   
5.   
6.   
7. .container{text-align:center;}   
8. .container ul{list-style:none;margin:0;padding:0;display:inline;}   
9. .container li{margin-right:8px;display:inline;}   
10.   
11.   
12.   
13.   
14. "container">   
15.     
      
    •         
    • "#">1
      
    •         
    • "#">2
      
    •         
    • "#">3
      
    •     
      
16.   
17.   
18.   

方法3. 设置  position:relative  和  left:50% 利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

例子：

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.     我们来学习一下这种方法。