个人的学习笔记
一.水平居中布局（核心代码，四种方式）
1.display：flex + justify-content:center || margin：0 auto
.parent宽是不固定的
类名为.child的div是display：block 默认与父元素同宽，父元素设置了display：flex后，子元素（.child）就变成了flex-item默认的宽是会根据内容的宽，父级元素再设置justify-content:center，子元素（.child）就会水平居中（如图）。
这样布局的优缺点：
优点：只需要在父元素上设置就ok了，不需要在子元素中设置。
缺点：display：flex 在IE 6 7 8 中是不支持的
2.display：inline-block + text-align：center
子元素设置display：inline-block 后宽度会根据内容宽（inline-block的特点），父元素设置text-align：center（对inline元素起作用，对inline-block元素也起作用）。
改布局的优缺点：
优点：兼任性很好（虽然inline-block不支持IE 6 7 但可以用display：inline + room：1 来代替 就支持了）
缺点：父级元素设置了text-align：center 它的子元素 子子元素 子子子元素… 内容都会居中。
3.display:table + margin:0 auto
子元素设置display：table 盒子宽会根据内容宽（table虽然跟block很相似，但这点不同）
再设置margin：0 auto （margin：0 auto 只作用block元素，也说了table与block有点相似也可以用）。
改布局优缺点：
优点：只要在子元素设置就ok了，你不需要在父元素设置
缺点：display：table不支持IE 6 7 （但可以把结构换成table就可以兼任了）
4.absolute + transform
父元素设置position:relative 可使父元素做为参造物
子元素设置absolute 看使盒子宽根据内容宽（absolute特点）设置left：50% 是向右边过去盒子距离的一半的（不居中） 再设置translateX（-50%）才向左边移动盒子的一半（translateX 百分比的参造物是自身）
改布局的优缺点：
优点：absolute是脱离文档流的（absolute的特点），不会影响后面的元素
缺点：transform属于css3的内容不支持IE6 7 8