CSS元素水平居中

一、块级元素

1.1 margin

  这里需要说明的是外边距margin方法只适用于块级元素同时指定了宽度：因为若是非块级元素，左右外边距auto将不会起作用。同时块级元素如果没有指定宽度，默认是占据父级元素宽度的100%。

    
    
    


    
元素居中

1.2 使用定位

  该定位方法对元素种类没有要求，因为会默认转换为行内块(inline-block)，只不过需要知道元素的宽度，并将其参照元素设置定位属性。方法原理是首先left:50%;这样元素向左移动参照元素宽度一半的距离，此时还再向右移动回自己一般的距离就能保证元素水平居中：

定位居中原理

    
    
    


    

        
元素居中
    

1.3 translate方法

  translate方法原理与定位一致，不过它使用更加方便，即不需要知道元素的宽度

    
    
    


    

        
元素居中
    

二、行内块与行内元素

  目前知道的方法是为父级元素添加text-align:center属性，其中父级元素不一定要求是块级元素，行内块元素亦可：

    
    
    


    

        
元素居中