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

 

<div id="parent">
    <div id="child"></div>
</div>
<style>
    #parent {
        background-color: #666666;
        height: 60px;
        width: 100%;
    }

    #child {
        background-color: #4492D0;
        height: 60px;
        width: 60px;
        /*
         * table和block都可以（div默认是block,所以也可以不用专门设置）
         */
        display: table;
        /*
         * 外边距
         * 一个值：上右下左
         * 两个值：第一个表示上下，第二个表示左右
         * 三个值：第一个表示上，第二个表示左右，第三个表示下
         * 四个值：分别表示上右下左
         * auto：根据浏览器自动分配
         */
        margin: 0 auto;
    }
</style>

优点：只需要对子集元素进行设置就可以实现水平居中

缺点：如果子集元素脱离文档流（添加position:absolute、float等属性）就会导致margin属性失效

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

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