小编给大家分享一下css实现垂直居中的方法有哪些,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联公司是一家集网站建设,宁国企业网站建设,宁国品牌网站建设,网站定制,宁国网站建设报价,网络营销,网络优化,宁国网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
html结构
<p class="box box2"> <span class="content content2">垂直居中</span></p>
默认css样式结构
.box{ width:200px; height:200px; background-color:green; } .content{ background-color:yellow; }
1. table-cell
该方法兼容IE8+,火狐,谷歌,并且content是否有宽高都可以。 注:IE8+ 包含 IE8
.box2{ display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 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;}
看完了这篇文章,相信你对css实现垂直居中的方法有哪些有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
标题名称:css实现垂直居中的方法有哪些
浏览地址:https://www.cdcxhl.com/article28/jddhcp.html
成都网站建设公司_创新互联,为您提供营销型网站建设、App开发、品牌网站制作、动态网站、App设计、网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联