javascript - html 表单在分辨率更改时更改位置

Question

我最近一直在为我的网站设计登录界面

我制作了一个位置固定的表格，但是随着屏幕分辨率的改变，不仅表格的位置发生了变化，图像也发生了变化，从而使它们相交并使它们看起来不对。

问题:如何让我的表格在不同的分辨率下保持在一个位置，

网站:secret.nuky.tk

代码如下:

#username{  
top: 50%;
left:55%;
margin-top: -100px;
margin-left: -200px;
}
#password{
top: 56%;
left: 55%;
margin-top: -100px;
margin-left: -200px;
}
img{
position: fixed;
top:25%;
left:56%;
margin-top: -100px;
margin-left: -200px;
}

谢谢你，

Answer 1

首先删除你所有的

position: fixed;
top: 50%;
left: 55%;
margin-top: -100px;
margin-left: -200px;

从你的 css 元素中，注意它仍然很漂亮，只是没有居中，然后把你想要居中的所有东西都放在 <div class='center'> 中。然后像那样设置样式(或固定，但如果您想响应所有屏幕尺寸，请不要使用带像素的边距)

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

translate(-50%, -50%) 表示我想将我的 div 移动 50% 的 it's 高度和宽度到顶部和右边，所以它以 div 中心为中心，并且不像你想的那样在左上角，并试图用负边距防止