摘要:简介总结记录一下经常需要用到垂直居中布局,欢迎补充空手套。。。
简介
总结记录一下经常需要用到垂直居中布局,欢迎补充(空手套。。。O(∩_∩)O)
以下栗子如果未特别标注同一使用这样的html结构
垂直居中布局 利用绝对定位和负margin
绝对定位可以很容易做到top:50%,现在只要再让目标元素上移自身高度的一半就垂直居中了
.container { background: #777777; height: 400px; position: relative; } .container .content { width: 100px; height: 100px; position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; background: #ee5f28; }
优点:兼容性好
缺点:需要知道居中元素的高度
.container { background: #777777; height: 400px; position: relative; } .container .content { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: #ee5f28; }
优点:不需要考虑content元素的高度
缺点:兼容性
利用绝对定位和calc.container { background: #777777; height: 400px; position: relative; } .container .content { width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); background: #ee5f28; }
优点:相比于前面少了两条样式
缺点:兼容性
利用flex.container { background: #777777; height: 400px; display: flex; justify-content: center; align-items: center; } .container .content { width: 100px; height: 100px; background: #ee5f28; }
.container { background: #777777; height: 400px; display: flex; } .container .content { width: 100px; height: 100px; background: #ee5f28; margin: auto; }
优点:垂直居中特别容易搞定
缺点:兼容性
震惊absoulute(绝对定位)还可以这样用.container { background: #777777; height: 400px; position: relative; } .container .content { width: 100px; height: 100px; background: #ee5f28; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
优点:
1.跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10);
2.无特殊标记,样式更精简;
3.自适应布局,可以使用百分比和最大最小高宽等样式;
4.居中时不考虑元素的padding值(也不需要使用box-sizing样式);
5.布局块可以自由调节大小;6.img的图像也可以使用
6.浏览器支持:Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中,甚至也可以运行在IE8~IE10上
使用inline-block.container { background: #777777; height: 400px; text-align: center; font-size: 0; overflow: auto; } .container::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .container .content { display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: #ee5f28; }
这里注意:容器‘container’里要设置font-size:0;避免inline-block之间产生间隔
优点:
内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好,甚至可以调整支持IE7
使用table与table-cellDocument
优点:
内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好
缺点:额外标签
参考资料https://caniuse.com/
https://www.w3cplus.com/css3/...
http://blog.jobbole.com/46574/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51736.html
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...
摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...
摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...
阅读 969·2021-09-26 10:15
阅读 2030·2021-09-24 10:37
阅读 2556·2019-08-30 13:46
阅读 2612·2019-08-30 11:16
阅读 2395·2019-08-29 10:56
阅读 2578·2019-08-26 12:24
阅读 3457·2019-08-23 18:26
阅读 2644·2019-08-23 15:43