黑松山资源网 Design By www.paidiu.com
前言
最近在总结前端知识,也参加了一些面试,面试中遇到一道题要求垂直居中,现在对这进行一下总结,也好巩固一下知识。
css实现垂直居中
1.利用line-height实现居中,这种方法适合纯文字类的;
<!-- css --> <style> .parents { height: 400px; line-height: 400px; width: 400px; border: 1px solid red; text-align: center; } .child { background-color: blue; color: #fff; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
2.通过设置父容器相对定位,子级设置绝对定位,标签通过margin实现自适应居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: blue; /* 四个方向设置为0, 然后通过margin为auto自适应居中 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
3.弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #333; background-color: yellow; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
4. 父级设置相对定位,子级设置绝对定位,并且通过位移transform实现;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
5. 父级设置弹性盒子,并设置弹性盒子相关属性;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; justify-content: center; /* 水平 */ align-items: center; /* 垂直 */ } .child { width: 200px; height: 100px; color: black; background-color: orange; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
6. 网格布局,父级通过转换成表格形式,然后子级设置行内或行内块实现。(需要注意的是:vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素)。
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: table-cell; text-align: center; vertical-align: middle; } .child { width: 200px; height: 100px; color: #fff; background-color: blue; display: inline-block; /* 子元素设置行内或行内块 */ } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐