水平布局
要求：
里外容器的宽度都是不一定的
<div class="parent">
<div class="child">DEMO</div>
</div>
Methods ①：inline-black + text-align
优点：兼容性比较好，兼容到IE6\7浏览器
缺点：child会继承父元素属性，内容也会居中，在.child中添加text-align:left
.child{
display: inline-block; //特点：宽度根据内容
}
.parent{
text-align: center; //特点：对inline元素起作用
}
Methods ②：table + margin
优点：只需要对自己设置，IE8以上浏览器都是支持的
兼容IE6\7：结构换成table
.child{
display: table; //特点：非常像black元素，区别宽度跟着内容走
margin: 0 auto；
}
Methods ③：absolute + transform
优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀
.parent{
position: relative; //父容器设置相对定位，编程参照物
}
.child{
position: absolute; //特点；宽度由内容决定
left: 50%；
transform: translateX(-50%);
}
Methods ④：flex + justify-content
优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //特点：宽度就变成了内容的宽度
justify-content: center;
}
Methods 2：
.parent{
display: flex;
}
.child{
margin: 0 auto;
}
垂直居中
要求：
里外容器的宽度都是不一定的
<div class="parent">
<div class="child">DEMO</div>
</div>
Methods ①：table-cell + vertical-align
优点：兼容性比较好，兼容到IE8以上浏览器
兼容IE6\7：结构换成table
.parent{
display: table-cell;
vertical-align: middle;
}
Methods ②：absolute + transform
优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀
.parent{
position: relative; //父容器设置相对定位，编程参照物
}
.child{
position: absolute; //特点；宽度由内容决定
top: 50%；
transform: translateY(-50%);
}
Methods ③：flex + align-items
优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //child会撑满整个容器
align-items: center;
}
Methods 2：
.parent{
display: flex;
}
.child{
margin: 0 auto;
}
居中（水平+垂直）
要求：
里外容器的宽度都是不一定的
Methods ①：inline-block + text-align + table-cell + vertical-align
优点：兼容性比较高
缺点：table-cell在低版本不支持，可以换table结构
.parent{
text-align: center; //水平居中
display: table-cell; //垂直居中
vertical-align: middle; //垂直居中
}
.child{
display: inline-block; //水平居中
}
Methods ②：absolute + transform
优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀
.parent{
position: relative; //父容器设置相对定位，编程参照物
}
.child{
position: absolute; //特点；宽度由内容决定
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Methods ③：flex + justify-content + align-items
优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //特点：宽度就变成自身的宽度，高度撑满
justify-content: center;
align-items:center
}
总结：
所列的解决方案不一定是全的，做解决方案大致的思路：
首先，需要了解CSS里面很多属性它的值，它的一些特性
然后，对问题进行分解
最后，把这些特性与分解出来的问题做练习，这个问题可以用那些特性去实现
