div 页面居中，响应式布局

1.inline-block+text-align

如果不希望元素内的文字水平居中，那么需要在child中设置text-align为left。

2.table+margin

3.absolute+transform

子元素不会对其他元素造成影响

4.flex+justify-content

只需要设置父元素

二：垂直居中（父容器和子容器的高度都是不一定的）

1.table-cell+vertical-align

兼容性比较好

2.absolute+transform

子元素不会干扰其他的元素。

3.flex+align-items

只需对父元素进行设置。

三、居中（父容器和自容器的大小都是不确定的）

1.inline-block+text-align+table-cell+vertical-align

2.absolute+transform

3.flex+justify-content+align-items

绝对居中

用到的平移

四、多列布局（一列定宽，另一列自适应）

1.float+margin

清除浮动时会出现问题

改进方案--清除浮动之后就不会出现问题

2.float+overflow

3.table

4.flex

五、多列布局（一列不定宽，另一列自适应）

1.float+overflow

2.table（将table-layout：fixed删除）

3.flex

六、全屏布局（有固定区域也有自适应区域）

1.position

2.flex（css3新出现的概念）

flex-direction不设置时默认值为row，水平方向。 如果需要每个模块都自适应，通过里面的内容来撑起宽高，则删除代码中的高度设置就行。

七、响应式

1.少用定宽，多用自适应。

宽度设置为设备宽度；初始缩放为1，用户不能手动缩放。

2.媒体查询（防止手机屏幕太小布局发生变化）