摘要:内容无法撑开父级容器表格容器居中使用场景容器内容居中,并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高,容器宽高均不用。
以前前端面试基础问题的时候经常会被问到这个问题:
但是从来没有做过这样的总结,网上很多人总结的很多,很好。自己干了这么多年,这个问题使用场景还是蛮多的,还是自己总结一下吧(不断更新)
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以下的浏览器
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51523.html
摘要:我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景,今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。不定宽块状元素水平居中我们来学习一下这种方法。 我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景,今天我们就来看一下如何设置水平居中和垂直居中。 水平居中 行内元素。 如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:c...
摘要:内容无法撑开父级容器表格容器居中使用场景容器内容居中,并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高,容器宽高均不用。 以前前端面试基础问题的时候经常会被问到这个问题:但是从来没有做过这样的总结,网上很多人总结的很多,很好。自己干了这么多年,这个问题使用场景还是蛮多的,还是自己总结一下吧(不断更新)...
阅读 3342·2021-11-22 13:53
阅读 3343·2021-10-11 11:11
阅读 916·2019-08-30 14:12
阅读 1196·2019-08-29 17:16
阅读 621·2019-08-29 16:45
阅读 3323·2019-08-29 12:56
阅读 650·2019-08-28 17:55
阅读 2048·2019-08-26 13:24