javascript - CSS对齐以适应不同的屏幕分辨率

Question

我是 HTML 和 CSS 的新手。我正在使用 ImpactJS 引擎，目前正在为我的网络游戏中的某些元素处理 UI。我正在尝试添加一个输入框并在游戏的 javascript 文件中使用 Jquery 调用它。到目前为止，我一切正常，但是当我尝试调整我的文本输入框并提交按钮以固定并且不随不同的屏幕分辨率而改变时，但目前它似乎无法正常工作。输入框和提交按钮会根据不同的屏幕分辨率改变大小和宽度。下面是我的 CSS 文件

我也尝试查看其他类似的论坛并尝试将位置更改为绝对但也不起作用。

    #problemdisplay {
        position: absolute;
        margin-top: 10%;
        width: 100%;
    }
    #problemform {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: 280px 2px 15px 400px;
    }
    #probleminput {
        display: none;
        width: 45%;
        margin-left: 5.5%;
        margin-right: 5.5%;
        padding: 35px 5px 15px 20px;
    }
    #problemsubmit {
        display: none;
        width:5%;
        padding: 15px 10px 8px 2px;
    }
    #prob_submit_msg {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #canvaswrapper {
        margin: 15px;
        position: relative;
    }
    #canvas {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

如有任何帮助，我们将不胜感激。

Answer 1

如果您有一个要调整到其中心的 div，让事情变得简单让我们假设您的 div 的高度为 300px，宽度为 400px，您所要做的就是:

position:absolute;
margin-top:-150px;
margin-left:-200px;
top:50%;
left:50%;

这将完成这项工作，它会将您的 div 调整到每个屏幕分辨率的中心。