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

 

<div id="parent">
    <div id="child"></div>
</div>
<style>
    #parent {
        background-color: #666666;
        height: 60px;
        width: 100%;
        /*
         * 最初是用来为文本内容设置对齐方式
         * 如果子级元素为内联元素，该属性也有效
         * 但是如果子级只是inline的话，会导致它的width和height无效
         * 而inline-block整合了内联和块级元素，width和height有效
         */
        text-align: center;
    }

    #child {
        background-color: #4492D0;
        height: 60px;
        width: 60px;
        /*
         *block-块级元素；inline-内联元素；inline-block-行内块级元素（块级+内联）
         */
        display: inline-block;
    }
</style>

优点：浏览器兼容性比较好

缺点：text-align属性具有继承性，会导致子集元素的文本也是居中的

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

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