最近要准备移动端项目，大半年没好好写过CSS了，今天恶补了一下CSS的一些布局，下面做一些分享。
水平居中布局
1.margin + 定宽
Demo
这种常见的写法就不再赘述了。
2. table + margin
Demo
display: table 在这里的作用有两个：一、将span元素转为块元素性质，二、设置了span宽度为内容宽。
* 无需设置父元素样式 （支持 IE 8 及其以上版本），IE 8以下版本需要调整页面结构至 table。
3.inline-block + text-align
Demo
display: inline-block 将div块元素转为行内块元素性质(具备了一些行内元素的特性),固给父元素设置text-align: center 能起到居中效果。
* 兼容性佳（甚至可以兼容 IE 6 和 IE 7）
4. absolute + margin-left
Demo
* 宽度固定
* 相比于使用transform ，有兼容性更好
5. absolute + transform
Demo
* transform 为 CSS3 属性，有兼容性问题
注：绝对定位脱离文档流，不会对后续元素的布局造成影响
6. flex + justify-content
Demo
* 只需设置父节点属性，无需设置子元素
* flex布局有兼容性问题
垂直居中
1.table-cell + vertical-align
Demo
* 兼容性好(IE 8以下版本需要调整页面结构至 table)
2.absolute + transform
Demo
* transform 为 CSS3 属性，有兼容性问题
* 同水平居中，这也可以用margin-top实现，原理水平居中
3.flex + align-items
Demo
* 有兼容问题
水平垂直居中
1. absolute + transform
Demo
2. inline-block + text-align + table-cell + vertical-align
Demo
* 兼容性好
3. flex + justify-content + align-items
Demo
* 只需设置父节点属性，无需设置子元素
* 有兼容性问题
一列定宽，一列自适应
1.float + margin
left
right
* IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：
left
right
* 此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
2.float + overflow
left
right
* 设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么？用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6。
3 .table
left
right