首先分为PC与Mobile，若要兼容ie8需要使用float布局，此外使用flex布局
水平居中：
块级元素
- 子元素宽度不固定，指定margin-left 和 margin-right为同一个值
- 子元素宽度固定，指定margin-left，margin-right为auto
行内元素 - 父级指定text-align: center
垂直居中:
- 父元素高度不确定，父元素指定padding-top和padding-bottom为同一值，则子元素将垂直居中
- 父元素高度确定(尽量避免)
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
网友评论