首页 / CSS / css垂直居中的整理总结
css垂直居中的整理总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css垂直居中的整理总结,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3378字,纯文字阅读大概需要5分钟。
内容图文
![css垂直居中的整理总结](/upload/InfoBanner/zyjiaocheng/415/c381ff5f8d9c448fb7683f69e16bb53c.jpg)
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
垂直居中用到的地方有很多,解决的方法也有很多。
已知元素宽度 可以用position定位 + margin负值的方法
绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中;如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多
绝对定位 + 左50% + margin左:宽度一半的负值 可以做到水平居中 右也可以
绝对定位 + 上50% + margin上:高度一半的负值 可以做到垂直居中 底部也可以
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 500px; height: 500px; background: #f90; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/ /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/ } .content{ width: 100px; height: 200px; background: #0f8; position: absolute; /*position: absolute基于第一个不是position:static的父级元素定位*/ left: 50%; top: 50%; margin-left: -50px; margin-top: -100px; /*绝对定位 + 左50% + margin左:宽度一半的负值 可以做到水平居中 右也可以*/ /*绝对定位 + 上50% + margin上:高度一半的负值 可以做到垂直居中 底部也可以*/ } </style> </head> <body> <p class="wrapper"> <span class="content"></span> </p> </body></html>
View Code
未知元素宽度 可以用position定位 + transform:translate(x,y)移动
绝对定位 + 上50% + 下50% + transform:translate(-50%,-50%) 可以做到垂直居中
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 500px; height: 500px; background: #f90; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/ /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/ } .content{ width: 100px; height: 200px; background: #0f8; position: absolute; /*position: absolute基于第一个不是position:static的父级元素定位*/ left: 50%; top: 50%; transform: translate(-50%,-50%); /*transform变化、使...变形、转换;transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动,旋转,缩放,倾斜*/ /*translate平移,是transform的属性值的一部分*/ /*transition过渡、转变;可多个样式的变换效果*/ } </style> </head> <body> <p class="wrapper"> <span class="content"></span> </p> </body></html>
p中img图片垂直居中:
可以用vertical-align:middle,但是这个属性只有在inline-block类型(inline也有影响)的元素身上起作用,vertical-align的理解我得继续学习下,也欢迎大家指正
方法一:图片vertical-align:middle + 父元素的height与line-height一致
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0;margin: 0; } .wrapper{ height: 300px; line-height: 300px; width: 300px; margin:100px auto; background: #f90; text-align: center; } .wrapper img{ width: 150px; vertical-align: middle; } </style> </head> <body> <p class="wrapper"> <img src="images/1.jpg" alt="美女" title="美女"/> </p> </body></html>
View Code
方法二:父元素设置display:table-cell和vertical-align
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0;margin: 0; } .wrapper{ width: 300px; height: 300px; background: #f90; text-align: center; vertical-align: middle; display: table-cell; } .wrapper img{ width: 150px; } </style> </head> <body> <p class="wrapper"> <img src="images/1.jpg" alt="美女" title="美女"/> </p> </body></html>
更多css垂直居中的整理总结相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的css垂直居中的整理总结全部内容,希望文章能够帮你解决css垂直居中的整理总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。