CSS设置水平居中

内联元素的水平居中设置

内联元素的水平居中设置，是通过给其父元素设置 text-align: center 来实现的。示例如下：

HTML代码

    
水平居中显示

CSS代码

效果如下：

定宽块状元素的水平居中设置

定宽块状元素通过设置 左右margin值为auto来实现水平居中。示例如下：

HTML代码

    

        
定宽块状元素水平居中
    

CSS代码

效果如下：

不定宽块状元素设置水平居中方法一

利用table标签的长度自适应性(table其长度根据其内文本长度决定)，可以将table看做一个定宽块状元素，然后再利用定宽块状元素水平居中的方法进行设置。示例如下：

HTML代码

    

        

            

                

                    

                        
内容1
                        
内容2
                    
                
            
        
    

CSS代码

效果如下：

不定宽块状元素设置水平居中方法二

改变块状元素的display为inline类型(设置为内联元素)，然后将其父元素设置 text-align: center 来实现水平居中。示例如下：

HTML代码

    

        
内容01
        
内容02
    

CSS代码

效果如下：

不定宽块状元素设置水平居中方法三

给父元素设置float，然后给父元素设置position: relative;left:50%; 子元素设置position:relative;left:-50%; 来实现水平居中。示例如下：

HTML代码

    

        
内容
    

CSS代码

效果如下：