CSS水平居中布局解决方案三

 

<div id="parent">
    <div id="child"></div>
</div>
<style>
    #parent {
        background-color: #666666;
        height: 60px;
        width: 100%;
        /*
         * 开启父级元素定位
         * 默认static，不开启定位
         * absolute、relative、fixed都可以开启定位
         */
        position: relative;
    }

    #child {
        background-color: #4492D0;
        height: 60px;
        width: 60px;
        /*
         * 当前元素设置为绝对定位后：
         *     *如果父级元素没有开启定位的话，当前元素是相对于页面定位
         *     *如果父级元素开启定位的话，当前元素是相对于父级元素定位
         */
        position: absolute;
        /*
         * 相对于父级元素左边50%
         */
        left: 50%;
        /*
         * 向左偏移子级元素的50%
         */
        transform: translateX(-50%);
    }
</style>

left:子集元素左边线距离左边的距离，只设置left的距离会使子集元素偏右，所以使用transform属性将子集元素再向左便宜它的50%

优点：父级元素是否脱离文档流都不会影响子集元素的居中效果

缺点：transform是css3新增属性，对浏览器兼容性不好

CSS水平居中布局解决方案一

CSS水平居中布局解决方案二