HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 body { 11 margin: 0; 12 } 13 14 .containerCenterAlert { 15 width: 300px; 16 height: 300px; 17 background-color: #ff0; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 margin-left: -150px; 22 margin-right: -150px; 23 } 24 25 .containerMobileCenterAlert { 26 /* height: 50%; */ 27 width: 50%; 28 position: absolute; 29 top: 50%; 30 left: 50%; 31 background-color: #f00; 32 -moz-transform: translate(-50%, -50%); 33 -ms-transform: translate(-50%, -50%); 34 -webkit-transform: translate(-50%, -50%); 35 transform: translate(-50%, -50%); 36 } 37 </style> 38 </head> 39 40 <body> 41 <!-- <div class="containerCenterAlert"></div> --> 42 <div class="containerMobileCenterAlert"> 43 旧数据 旧数据 旧数据 旧数据 44 </div> 45 </body> 46 47 </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现