水平居中
行内元素
父元素设置text-align:center
块级元素
页面结构
初始样式
1.一般处理
子元素添加margin:0 auto;（ps：前提是子元素设置了宽高）
2.子元素开启了float
给父元素设置width:fit-content;并且设置margin:0 auto;（缺点:会影响父元素宽度）
3.display：flex
给父元素开启flex布局，并且设置主轴对齐方式为center
优点：无需对子元素进行处理，并且子元素可以不设定宽高也有居中效果。 缺点：flex布局兼容性问题（IE10以下不支持，其余主流浏览器没有问题）
4.绝对定位
前提：该方式需要给父元素设置position:relative;否则会相对根元素居中。
已知宽度
开启绝对定位后，设置left为50%，然后相对于宽度，再使用mar-left左移宽度的50%即可
利用css的水平属性的计算公式实现（这里不做解释，有兴趣可以自行搜索），需要width固定，否则子元素会撑满整个父元素，也就谈不上居中了。
未知宽度
利用transform变换实现。
垂直居中
行内元素
设置子元素行高与父元素高度一样
块级元素
行内块元素
vertical-align属性只对行内元素，行内块元素，表格元素生效。使用该属性时，实际效果是会相对于其他的行内元素，行内块元素，表格元素（也就是兄弟元素）进行比较。mdn的文档中描述则是
这一点我也没有理解。
table
缺点：会使子元素的宽高属性失效（默认撑满父元素），并且IE8以下不支持
flex
优缺点同水平居中的flex方法
