首先分為PC與Mobile，若要兼容ie8需要使用float布局荧琼，此外使用flex布局
水平居中：
塊級元素
- 子元素寬度不固定，指定margin-left 和 margin-right為同一個值
- 子元素寬度固定，指定margin-left命锄，margin-right為auto
行內(nèi)元素 - 父級指定text-align: center
垂直居中:
- 父元素高度不確定堰乔，父元素指定padding-top和padding-bottom為同一值，則子元素將垂直居中
- 父元素高度確定(盡量避免)
a. IE: 使用table 或div 模擬 table
b. Chrome/Mobile 使用flex
---盡量使用line-height加padding-top, padding-bottom實現(xiàn)
flex布局
http://www.flexboxdefense.com/
http://flexboxfroggy.com/#zh-cn
flex-wrap.png
flex-wrap優(yōu)化-calc.png
[圖片上傳失敗...(image-a260f5-1546429953448)]
兄弟元素添加display: flow-root或者overflow創(chuàng)建BFC
負margin:
負Margin.png
