提供一些常见的布局demo，仅供参考
水平居中
margin + 定宽
table + margin实现不定宽
inline-block + text-align实现不定宽
absolute + margin-left
absolute + transform
flex + justify-content垂直居中
table-cell + vertical-align
absolute + transform
absolute + 负margin
flex水平垂直居中
absolute + transform
absolute + margin负值
table-cell + vertical-align + inline-block + text-align
flex
- 一列定宽，一列自适应
float + margin
float + overflow
tabel + tabel-cell
flex
还可以延展成多列定宽，一列自适应 多列不定宽加一列自适应，比如圣杯布局、双飞翼之类的，那就再讲讲圣杯布局和双飞翼布局了
实现圣杯布局
思路：三者的包裹容器设置一个左右padding来装下左边的aside和ad，而main设置浮动，宽度为100%，这样他就处在中间并且宽度自适应了，将aside也设置为浮动，然后margin-left：-100%，他正好跑到了处在中间main的左上角，然后给他设置position：relative，他就正好处在浏览器左上角了，而ad设置为浮动，然后margin-left:-150px就回到了main的右上角，然后同理，设置position：relative就在浏览器右上角了
圣杯布局
实现双飞翼布局
思路：main设置浮动，宽度为100%，并且给它加一个子元素，给这个子元素设置一个左右margin，aside设置margin-left:-100%回到浏览器左侧，且设置为浮动，ad设置margin-left：adWidth，float：left，回到浏览器右侧
总结一下：双飞翼布局是利用main的子元素的左右margin，而圣杯布局是利用main的父元素的左右padding
等宽布局
float + 百分比宽度 + box-sizing: border-box
tabel + tabel-cell
flex等高布局
tabel + tabel-cell
float
abslute + top:0 + bottom:0
flex
事实上上面的方法并不全，但是这些大概够用了，不知道有人观察到没,float、tabel、flex用的最多，而且flex基本能完美实现所有布局，并且代码量极少极优雅，简直让人爱不释手...
