CSS中实现元素垂直居中的不同情况及方法是什么
Admin 2022-09-19 群英技术资讯 276 次浏览
知道居中元素的宽高
absolute + 负margin
代码实现
.wrapBox5{ width: 300px; height: 300px; border:1px solid red; position: relative; } .wrapItem5{ width: 100px; height: 50px; position: absolute; background:yellow; top: 50%; left:50%; margin-top: -25px; margin-left: -50px; }
运行结果
absolute + margin auto
代码实现
.wrapBox{ width: 300px; height: 300px; background: yellow; position: relative; } .wrapItem{ width: 100px; height: 50px; background:green; display: inline-block; position: absolute; top: 0px; bottom:0px; left: 0px; right: 0px; margin:auto; }
absolute + calc
代码实现
.wrapBox6{ width: 300px; height: 300px; border:1px solid green; position: relative; } .wrapItem6{ width: 100px; height: 50px; position: absolute; background:yellow; top: calc(50% - 25px); left:calc(50% - 50px); }
运行结果
三种对比总结
当居中元素知道宽高的时候,设置居中的方式比较简单单一。三种方法的本质是一样的,都是对居中元素进行绝对定位,在定位到上50%,左50%后再拉回居中元素的一半宽高实现真正的居中。三种方式的区别就在于拉回元素本身宽高的方式不同。
居中元素的宽高未知
absolute + transform
代码实现
.wrapBox{ width: 300px; height: 300px; background:#ddd; position: relative; } .wrapItem{ width: 100px; height: 50px; background:green; position: absolute; top: 50%; left:50%; transform: translate(-50% , -50%); }
运行结果
原理
原理类似于已知宽高的实现方式,只不过当前居中元素宽高未知,所以需要自动获取当前居中元素的宽高。translate属性正好实现了该功能。
优缺点
优点:自动计算本身的宽高
缺点:如果同时使用transform的其他属性会产生相互影响。
所以:在不使用transform的其他属性时推荐使用该方式
flex布局
.wrapBox2{ width: 300px; height: 300px; background: blue; display: flex; justify-content: center; align-items: center; } /*注意:即使不设置子元素为行块元素也不会独占一层*/ .wrapItem2{ width: 100px; height: 50px; background:green; }
运行结果
原理
将父级元素设置为流式布局,根据flex布局的属性特性,设置子元素居中。
优缺点
优点:flex布局灵活,不需要对子元素进行任何的设置
缺点:具有兼容性。子元素的float、clear、position等无法使用,如果同时具有其他布局,容易产生影响。
table-cell布局
代码实现
.wrapBox3{ width: 300px; height: 300px; background: yellow; display: table-cell; vertical-align: middle; text-align: center; } .wrapItem3{ width: 100px; height: 50px; background:green; display: inline-block; }
运行结果
原理
根据table的vertical-align属性,可以在表格元素内设置元素居中,再根据text-align设置水平居中
table元素
代码实现
.tableBox{ border:2px solid yellow; width: 300px; height: 300px; } .tableBox table{ width:100%; height:100%; } .centerWrap{ text-align: center; vertical-align: middle; } .centerItem{ display: inline-block; background:pink; }
运行结果
总结
使用table标签进行布局,主要还是使用了vertical-align属性和text-align属性。但是相对于上一种方式,使用table标签会产生大量的冗余代码。不推荐使用
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
对于CSS怎样实现垂直居中的效果,我们之前也了解了很多方法,而不同的实现方法各有其优缺点,本文再给大家分享一个特别的CSS实现垂直居中的方法,感兴趣的朋友就继续往下看吧。
这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了你可能需要这样的大屏数字滚动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章讲述的是“CSS布局控制换行的四种属性”内容,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
爱站技术小编最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉,常常容易搞混。所以从网站研究了点资料,总结一下,方便有需要的朋友们可以参考学习。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008