所有样式设置之前，Body元素可能会自带一个margin属性，需要将其覆盖掉。否则有些方法使用时可能会导致窗口边缘出现滚动条。
所以开始之前需要：
水平居中
1. 父元素设置text-align:center,子元素为行内元素或设置为行内元素，此时图片和文字都是居中显示的。
2. 当图片居中，图片下面的说明文字在居中位置并且需要左对齐显示的话，设置包裹的容器宽度为图片的宽度，并margin: 0 auto; 此方式对于块级元素和行内元素都适用。
3. 子元素宽已知px。相对于父元素定位，left偏移50%，左外边距设为自身宽高的负一半，需要设置父元素宽度。
4. transform
5. flex
垂直居中
1. 父元素display: table-cell;vertical-align: middle;子元素会垂直居中于父元素，需要确定父元素的高度。
缺点：margin属性失效，因为margin不适用于表格布局；
tabel-cell的元素宽高设置为百分比时无效果，如果需要宽度100%，将container宽度设置为极大的一个值；
当container需要设置为absolute的时候table-cell失效，因为absolute强制把非flex元素设置为block，解决办法是在外面再套一层容器进行absolute
2. 子元素高已知px。相对于父元素定位，top偏移50%，上外边距设为自身宽高的负一半，注意父元素需要设置height
3. transform
4. flex
水平垂直居中
1. 子元素宽高已知px。相对于父元素定位，top和left偏移50%，左外边距和上外边距各设为自身宽高的负一半；
缺点：确定的大小，无法自适应。
2. transform：将左外边距和上外边距负值修改为transform: translate(-50%,-50%),此时具有自适应的效果。原理：translate里的百分比是根据元素自身宽高计算的。
3. 子元素相对于父元素绝对定位，四周为0，并且margin值为auto
4. 父元素display: table-cell;vertical-align: middle;text-align:center子元素是行内元素
5. display: flex;justify-content: center;align-items: center;缺点：不兼容IE浏览器。
