让CSS里div上下左右绝对居中几种方式
1、绝对定位(常用于登录模块)
备注:前提条件div需要有宽高
备注:前提条件div需要有宽高
1 <div class="box"></div> 2 #css 3 .box{ 4 position:absolute/fixed; 5 left:0; 6 right:0; 7 top:0; 8 bottom:0; 9 margin:auto; 10 }
2、margin负值
备注:前提条件div需要有宽高
1 <div class="box"></div> 2 #css 3 .box{ 4 width:200px; 5 height: 200px; 6 position: absolute; 7 left:50%; 8 top:50%; 9 margin-left:-100px; 10 margin-top:-100px; 11 }
3、css3 transform
备注:用于不确定当前div的宽度和高度
1 <div class="box"></div> 2 #css 3 .box{ 4 position: absolute; 5 left:50%; 6 top:50%; 7 transform: translate(-50%, -50%); 8 }
4、flex 布局方式
1 <div class="box"> 2 <div class="child">child</div> 3 </div> 4 #css 5 .box{ 6 display:flex; 7 align-items:center; 8 justify-content:center; 9 }
5、table-cell 方式
<div class="box"> <div class="child">child</div> </div> #css .box{ display: table-cell; vertical-align: middle; text-align: center; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2020-04-26 Oracle左连接、右连接、全外连接以及(+)号用法