知识点：复合元素居中，分为水平居中和垂直居中。
1、水平居中
(1) text-align: center;适用范围，行内元素的居中。
行内元素在父元素里水平居中。
html
css
(2) margin: 0 auto; 适用范围：块级元素水平居中。
margin:0 auto;
2、垂直居中
(1) 借助table-cell,缺点是容器的margin属性失效了，解决方法：在容器外层再嵌套一个div,设置div的margin属性。
首先需要设置父元素dispaly:table-cell;vertical-align-middle;
table-cell
(2) 使用相对定位和绝对定位 relative和absolute
设置父级元素为相对定位，需要居中的元素为绝对定位：这里有子元素有确定宽高和不确定宽高的情况。
1、确定宽高
确定宽高的情况
2、子元素不确定宽高
l
子元素不定宽高
(3) 终极杀器---flex
利用flex布局，只需3行既可以完美实现
flex弹性布局
