以前前端面试基础问题的时候经常会被问到这个问题：
但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）1。绝对定位居中
width: 100px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -60px; /* (width + padding)/2 */ margin-top: -60px; /* (height + padding)/2 */
使用场景：Modal弹层, Toast, 布局内容提示单行提示文字
优点：1.适用场景多。2.不用care了父级元素的大小。3.兼容ie6-7缺点：1.子元素的宽高需固定。2.内容无法撑开父级容器2.transform绝对定位
width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
使用场景：不用兼容IE9以下的Modal弹层,弹层的宽高均不固定
优点：1.适用场景多。2.内容宽高，容器宽高均不用care缺点：1.不兼容IE9以下。2.内容无法撑开父级容器3.margin+绝对定位
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
使用场景：Modal弹层, Toast, 布局内容提示单行提示文字
优点：1.适用场景多。2.内容宽高，容器宽高均不用care。3.兼容性好缺点：1.父级容器必须声明高度。2.内容无法撑开父级容器4.表格容器居中
display: table-cell; vertical-align: middle; text-align: center;
使用场景：容器内容居中，并不想脱离文档流。（具体场景想不起来啦）
优点：1.内容溢出会将父元素撑开。2.内容宽高，容器宽高均不用care。3兼容IE9以下。缺点：1.不适用于Modal弹层这种盖住页面内容的布局5.使用line-height和text-align垂直居中
text-align: center; height: 100px; line-height: 100px;/*值等于元素高度的值*/
使用场景：一个容器内部的当韩文字居中
优点：1.内容宽高，容器宽高均不用care。 2. 兼容性好缺点：1.内容必须是inline或者inline-block的单行文本，不支持多行文本。6.Flex布局
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* OLD: Firefox (buggy) */ display: -ms-flexbox; /* MID: IE 10 */ display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */ display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
使用场景：微信小程序和一些不需要兼容IE的移动端H5开发
优点：1.内容宽高，容器宽高均不用care。缺点：1.不兼容IE10以下的浏览器