关于居中
水平居中:
1.text-align:center
2.margin:0 auto;
需要设置内容宽度;
垂直居中;
1.vertical-align:middle
该属性适用于只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。例如图片,按钮,单复选框,单行/多行文本框等HTML控件;
2.line-height
该属性适用于单行文本的垂直居中;多行文字的垂直居中可以使用span标签将文本包裹,然后使用vertical-align属性使其居中;
3.以下是关于内容垂直居中的实用方法
方法1:position+margin 方法2:float+height+margin 方法3:position+margin;IE8-不支持
<html> <head> <title>垂直居中</title> <meta charset="utf8"> <style type="text/css"> .contain{ height:800px; width: 800px; border: 1px solid #000; position: relative; } .one{ height:600px; width: 400px; border: 1px solid #000; position: absolute; top:50%; margin-top: -300px; } .two{ height:300px; width: 200px; border: 1px solid red; clear: both; } .two_1{ height:50%; margin-bottom: -150px; float: left; } .three{ width: 200px; position: absolute; margin: auto; top:0; left: 0; right: 0; bottom: 0; height:400px; border: 1px solid green; }*/ </style> </head> <body> <div class="contain"> <div class="one">方法1:position+margin负值</div> <div class="two_1"></div> <div class="two">方法2:float+height+margin负值</div> <div class="three">方法3:position+margin;IE8-是不支持的,实现垂直水平居中</div> </div> </body> </html>
注意:top:50%需要定位为absolute时才有效
如果觉得本文不错的话,帮忙点击下面的推荐哦,文章未经说明,均为原创,转载请注明出处,谢谢!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!