以前工作碰到这个问题,但不知道具体怎么解决,看了正美的博客测试下,果然有效,
<!DOCTYPE html> <html> <head> <title>百分比居中</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .center { position: absolute; left: 50%; top: 50%; /*Internet Explorer 10、Firefox、Opera 支持 transform 属性。*/ transform:translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);/* Safari and Chrome */ -moz-transform:translate(-50%,-50%); /* Firefox */ -ms-transform:translate(-50%,-50%); /* IE 9 */ -o-transform:translate(-50%,-50%);/* Opera */ /* 甚至不要定义 比如:Height 可以缺省! */ width: 40%; height: 50%; /*height: auto;*/ background: red; } </style> </head> <body> <div class="center">11111111111</div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步