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

看代码

<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为负值不会增加高度，只会产生向上位移，值越小离得越近
宽和高需要定死，否则居中会出现问题

 

posted on 2017-10-25 18:05  标配的小号  阅读(652)  评论(0)  编辑  收藏  举报

导航