登陆界面上下左右居中自适应屏幕显示的简单实现

来源:互联网 发布:ug线切割编程实例 编辑:程序博客网 时间:2024/05/01 22:30

看代码

<html><head><meta charset="utf8">           <title>登陆系统</title><style type="text/css">    html,body{margin:0;padding:0;border:0;background-color:#333;}            #loginPanel{background-color:#eee;}</style></head><body><div id="loginPanel" style="position:absolute;top:50%;left:50%;width:480px;height:240px;margin-left:-240px;margin-top:-120px;">登陆界面</div></body></html>

看效果
这里写图片描述

收缩窗口效果
这里写图片描述

不要问我为什么不写注释,因为我也不只是勉强根据单词才出个大概意思而已
不过还是随便补充以下注释吧,否则以后忘记了又要百度
margin-top为负值不会增加高度,只会产生向上位移,值越小离得越近
宽和高需要定死,否则居中会出现问题

原创粉丝点击