CSS水平居中总结(新手必看篇)

css代码：

1.      
2.   
3. .txtCenter{   
4.   
5.     text-align:center;     
6.   
7. }    
8.   
9.   

块状元素

定宽块状元素

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

html代码：

1.      
2.   
3. 我是定宽块状元素，哈哈，我要水平居中显示。
       
4.   
5.   

css代码：

1.     
2.   
3. div{       
4.   
5.     border:1px solid red;           
6.   
7.     width:200px;       
8.   
9.     margin:20px auto;    
10.   
11. }    
12.   
13.    

也可以写成：

1. margin-left:auto;    
2.   
3. margin-right:auto;  

注意：元素的“上下 margin” 是可以随意设置的。

不定宽块状元素

1. 加入 table 标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

html代码：

1.   
2.    
      
     
        
     
      
     
    

   我是第一行文本              我是第二行文本              我是第三行文本