这个问题之前在前端面试基础题中经常被问到：但是我从来没有做过这样的总结。网上很多人总结了很多，非常好。工作这么多年，这个问题的使用场景还是挺多的，自己总结一下吧（持续更新中）1、绝对定位居中宽度：100px；高度：100px；填充：20px；位置：绝对；顶部：50%；左：50%；左边距：-60px；/*(width+padding)/2*/margin-top:-60px;/*(height+padding)/2*/使用场景：Modal层、Toast、布局内容提示单行提示文字优点：1.适用场景多。2.不关心父元素的大小。3、兼容ie6-7缺点：1、需要固定子元素的宽高。2.内容不能展开父容器2.transform绝对定位宽度：50%；保证金：自动；位置：绝对；顶部：50%；左：50%；-webkit-transform:翻译(-50%,-50%);-ms-transform:翻译(-50%,-50%);转换：翻译（-50%，-50%）；使用场景：不兼容IE9以下的Modal图层，图层宽高相等不固定优点：1.适用场景多。2.内容的宽高和容器的宽高不需要关心缺点：1.不兼容IE9及以下。2.内容不能展开父容器3.margin+绝对定位margin:auto;位置：绝对；顶部：0；左：0；底部：0；单行提示文字的优点：1、适用场景多。2.内容的宽高和容器的宽高不需要关心。3.兼容性好缺点：1.必须声明父容器的高度。2、内容不能展开父容器4、表格容器居中显示：table-cell；垂直对齐：中间；文本对齐：居中；使用场景：容器内容居中，不想脱离文档流。（具体场景记不清了）优点：1.内容溢出会拉伸父元素。2.内容的宽高和容器的宽高不需要关心。3兼容IE9及以下版本。缺点：1.不适合覆盖页面内容的Modal层的布局。5.使用line-height和text-align垂直居中text-align:center;高度：100px；行高：100px；/*value等于元素高度的值*/使用场景：韩文字符在容器内居中时优点：1.内容的宽高和容器的宽高不需要关心.2.兼容性好。缺点：1.内容必须是inline或者inline-block单行文本，不支持多行文本。6.Flex布局展示：-webkit-box；/*OLD：Safari、iOS、Android浏览器、旧的WebKit浏览器。*/显示：-moz-box；/*OLD:Firefox(buggy)*/display:-ms-flexbox;/*中端：IE10*/显示：-webkit-flex；/*新，Chrome21-28，Safari6.1+*/display:flex;/*新：IE11、Chrome29+、Opera12.1+、Firefox22+*/-webkit-box-align:center;-moz-box-align：居中；/*旧的...*/-ms-flex-align:center;/*你现在知道该怎么做了……*/-webkit-align-items:center;对齐项目：居中；-webkit-box-pack：中心；-moz-box-pack：中心；-ms-flex-pack：中心；内容：中心；使用场景：微信小程序和一些不需要兼容IE的手机H5开发。优点：1.内容的宽高和容器的宽高不需要关心。缺点：1.不兼容IE10以下浏览器
