布局解决方案 ---居中布局（水平居中）

水平居中

div布局

	<div class="parent">
        <div class="child"> demo</div>
    </div>

css样式

1.inline-block + text-align

优点：兼容性极佳(可兼容 IE6、IE 7)

		.parent {
            text-align: center;
        }
        .child{
            display: inline-block;
        }

2.table + margin

优点: 无需设置父元素样式 （支持 IE 8 及其以上版本）

		.child {
           display: table;
           margin: 0 auto;
       }

3.absolute + transform

优点: 绝对定位脱离文档流，不会对后续元素的布局造成影响。
缺点：transform 为css3属性，有兼容性问题

		.parent {
           position: relative;
       }
       .child {
           position: absolute;
           left: 50%;
           transform: translateX(50%);
       }

4.flex + justify-content

优点：只需设置父节点属性，无需设置子元素
缺点：有兼容性问题

	.parent {
            display: flex;
            justify-content: center;
        } 
	/*这种也可以实现*/
	.parent {
         display: flex;
     }
     .child {
          margin: 0 auto;
     }