首页 > 代码库 > 总结垂直居中各方法优缺点和使用场景
总结垂直居中各方法优缺点和使用场景
一、容器内
1 .Center-Container { 2 position: relative; 3 } 4 5 .Absolute-Center { 6 width: 50%; 7 height: 50%; 8 overflow: auto; 9 margin: auto; 10 position: absolute; 11 top: 0; left: 0; bottom: 0; right: 0; 12 }
二、负外边距
.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }
优点:
1. 良好的跨浏览器特性,兼容IE6-IE7。
2. 代码量少。
缺点:
1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。
2. 内容可能溢出容器。
3. 边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。
三、变形
.is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
优点:
1. 内容可变高度
2. 代码量少
缺点:
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
四、表格单元格
#wrapper {display:table;} #cell {display:table-cell; vertical-align:middle;}
优点:
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 跨浏览器兼容性好。
缺点:
需要额外html标记
五、行内块元素
.Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ‘‘; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
优点:
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器,也适应于IE7。
缺点:
1.需要一个容器
2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3.内容块宽度不能超过容器的100% - 0.25em。
六、flex布局
.center-container{ display:flex; justify-content:center; align-item:center } .center-content{ width:50%; height:50% }
优点:
1. 高度宽度可变
缺点:
1.需要一个容器
2.ie7/8 不兼容
总结垂直居中各方法优缺点和使用场景
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。