CSS布局总结

首先分为PC与Mobile，若要兼容ie8需要使用float布局，此外使用flex布局

水平居中：
块级元素

1. 子元素宽度不固定，指定margin-left 和 margin-right为同一个值
2. 子元素宽度固定，指定margin-left，margin-right为auto
   行内元素
3. 父级指定text-align: center

垂直居中:

1. 父元素高度不确定，父元素指定padding-top和padding-bottom为同一值，则子元素将垂直居中
2. 父元素高度确定(尽量避免)
   a. IE: 使用table 或div 模拟 table
   b. Chrome/Mobile 使用flex
   ---尽量使用line-height加padding-top, padding-bottom实现

flex布局
http://www.flexboxdefense.com/
http://flexboxfroggy.com/#zh-cn

flex-wrap.png
flex-wrap优化-calc.png

[图片上传失败...(image-a260f5-1546429953448)]
兄弟元素添加display: flow-root或者overflow创建BFC

负margin:

负Margin.png