水平居中分为 行内元素的水平居中 和 块状元素的水平居中（块状元素又分为定宽块状元素和不定款块状元素）

一、行内元素居中 像文本图片等行内元素，居中是在其父元素中加 text-align:center; 来实现

     
      我要居中
     
.a{ border:1px solid red;   text-align:center; }

div 就是 文本“我要居中”的父元素, 文本“我要居中”，就会水平居中

二、定宽块状元素

width 已经定了的块状元素 ，通过给他设置 margin: 0 auto; 来实现

     
      我要居中
     
.a{ border:1px solid red;    width:300px;    margin: 0 auto;}

　　

class 为a的div就会实现水平居中

三、不定宽块状元素

三种方法实现 ：

1、加入table标签，利用table标签的长度自适应，--即不定义其长度也不默认父元素bodyd的长度，table的长度根据其内文本长度决定。因此可看成一个定宽度块状元素，然后设置margin： 0 auto；

     
table{ margin: 0 auto;}
    
         
        
          
我是第一行文本
        
          
我是第二行文本
        
          
我是第三行文本
    
         
    

2、将其设置为行内元素，display：inline; 然后用对行列元素居中的方法让其居中

     
  
      
           设置我所在的div容器水平居中    
      
     
.wrap{    background:#ccc;    display:inline;    }.father{    text-align:center;}

3. 通过给父元素设置，然后给父元素设置  和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

     
      
    
       
        我们来学习一下这种方法。
       
      
     
.wrap-center{    background:#ccc;    position:relative;    right:50%;    }.father{    float:left;    position:relative;    left:50%;}