1.登录框上下左右自适应居中
原理就是用position:absolute,然后用left：50%，top：50%，现在登录表单左侧直角是在页面的中间了，
但登录框本身还有宽度和高度，所以我们再用margin-left:-登录框宽度，margin-top：-登录框高度，就可以让登录框显示在页面的正中间了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>登录框自适应居中</title> <style> #LoginContainer { position: absolute; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #ccc; } </style></head><body> <div id="LoginContainer"> 这是登录框 </div></body></html> |
2.左右布局，左侧固定宽度，右侧自适应宽度
原理就是左侧div固定宽度+float，然后右侧的div设置左间隔左侧div宽度的距离就可以了（margin-left:左侧div的宽度）
<style type="text/css">
html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; }
.container { height: 100%; border: 1px solid #ccc; min-width: 600px; }
.container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; }
.container .content { height: 100%; margin-left: 200px; }</style><div class="container">
<div class="west">west</div>
<div class="content">content</div></div> 3.利用translate(-50%, -50%)居中(红色为关键部分)
position: fixed;
min-width: 100px;
color: #fff;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
已有1位网友发表了看法：
wys 评论于 [2020-04-18 07:24:15] 回复
好久没学了。刚玩网站时还买了本dreamweaver。