摘要:结构垂直居中默认样式结构该方法兼容,火狐,谷歌,并且是否有宽高都可以。兼容火狐谷歌参考布局左右居中上下居中绝对定位和负边距该方法兼容,火狐,谷歌,必须有宽高。
html结构
<div class="box box2"> <span class="content content2">垂直居中span> div>
默认css样式结构
.box{
width:200px;
height:200px;
background-color:green;
}
.content{
background-color:yellow;
}
1. table-cell 该方法兼容IE8+,火狐,谷歌,并且content是否有宽高都可以。 注:IE8+ 包含 IE8
.box2{ display:table-cell; //此元素会作为一个表格单元格显示(类似和 ) text-align:center; //左右居中 vertical-align:middle; //上下居中 } 2. display: flex; 该方法不兼容IE8,IE9,content是否有宽高都可以。兼容火狐、谷歌
参考flex布局:https://www.cnblogs.com/qingchunshiguang/p/8011103.html
.box2{ display: flex; justify-content:center; //左右居中 align-items:center; //上下居中 }3. 绝对定位和负边距 该方法兼容IE8+,火狐,谷歌,content必须有宽高。
.box2{
position:relative;
} .content2{ position:absolute; top:50%; left:50%; margin-top:-40px; margin-left:-40px; }4. 绝对定位和0 该方法兼容IE8+,火狐,谷歌,content必须有宽高。
.box2{ position:relative; } .content2{ margin:auto; position:absolute; top:0; left:0; right:0; bottom:0; }5. 绝对定位和transform 该方法不兼容IE8,兼容IE9+,火狐,谷歌,content是否有宽高都可以。
.box2{ position:relative; } .content2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }6. display:flex 和 margin:auto content有宽高:不兼容IE8,IE9,content没有宽高:不兼容IE。有无宽高都兼容火狐、谷歌。
.box2{ display: flex; text-align: center; } .box2 .content2{margin: auto;}
参考网址:https://www.cnblogs.com/hutuzhu/p/4450850.html
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1648.html
相关文章
【基础】这15种CSS居中的方式,你都用过哪几种?
摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...
【基础】这15种CSS居中的方式,你都用过哪几种?
摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...
【基础】这15种CSS居中的方式,你都用过哪几种?
摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...
【前端】这可能是你看过最全的css居中解决方案了~
摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...
【前端】这可能是你看过最全的css居中解决方案了~
摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...
CSS/CSS3 实现 居中(水平&垂直)
摘要:,水平居中行内元素把行内元素放在一个属性块元素中,然后设置父层元素属性居中,水平居中块状元素设置外边距,水平居中多个块状元素把块状元素属性,然后设置父层元素属性居中,水平居中多个块状元素布局实现把块状元素的父元素属性和,如下设置, 1,水平居中:行内元素 把行内元素放在一个属性块(display:block)元素中,然后设置父层元素属性居中: .test { text-align:ce...
发表评论
0条评论
raise_yang
男|高级讲师
TA的文章
阅读更多
删除tensorflow环境
阅读 2542·2023-04-25 20:50
安装指定版本的tensorflow
阅读 3869·2023-04-25 18:45
性能优化 | Go Ballast 让内存控制更加丝滑
阅读 2173·2021-11-17 17:00
德国IT安全监管机构审查小米手机
阅读 3284·2021-10-08 10:05
力软移动框架 ionic cordova插件jpush-phonegap-plugin 极光推送配置
阅读 3039·2019-08-30 15:55
前端面试每日 3+1 —— 第131天
阅读 3465·2019-08-30 15:44
简单动态启停图 js jquery css3
阅读 2326·2019-08-29 13:51
前端工程师的知识体系
阅读 1060·2019-08-29 12:47
阅读需要支付1元查看