昨天项目，一直出现一个无法居中的问题，最后发现竟然是text-align的问题，才发现自己对text-align的理解还是不够透彻，于是在此再举例分析下。

css中的元素一共有三类：块元素、行内块和内联元素。

三者的区别就是：

　　　　　　　　块元素可以设置宽高，会独占一行；

　　　　　　　　行内块拥有块元素的所有特性，除了无法独占一行；

　　　　　　　　内联元素无法设置宽高，不会独占一行。

而text-align的作用就是：可以为文字和内联元素、行内块设置水平居中，即使该文字是在块元素内。

以下是例子：

以下是html代码：

　　　　 
     
            
      
      
            
      这是span内联元素中的文字            
      
       这是块元素div中的文字
      
        
     
                
     
            
      
                                
       
                                    我是行内块元素，是有文字的span                
                
       
        我也是行内块元素，是div
       
                
                
       
            
        
     

以下css代码：

　　　　　　 .wrapper {
                   width: 500px;                border: 1px solid black;                margin: 0 auto;                text-align: center;            }            .span {
                   display: block;                width: 50px;                height: 50px;                background: #bac;            }            .div {
                   width: 50px;                height: 50px;                background: hotpink;            }            .span2 {
                   display: inline-block;                width: 150px;                height: 50px;                background: #bac;            }            .div2 {
                   display: inline-block;                width: 150px;                height: 50px;                background: hotpink;            }

以下是显示的示例：

所以，当使用text-align时，一定要注意，只能对文字（包括块元素中的文字）、内联元素和行内块进行水平居中，对块是没有用的。

注： 若对脱离文档流（比如position：absolute）的块元素水平居中，可对要求水平居中的块元素使用： left: 50%;  transform: translateX(-50%);（有浏览器兼容性，需全部写上）