.formholder {
width: inherit;
}

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


input[type=text], select {
    width: 100%;
    padding: 2vh 4vh;
    margin: 1vh;
    display: inline-block;
    border: 0.5vh #ffffff;
    border-radius: 1vh;
    box-sizing: border-box;
    border: solid 0.5vh #ffffff;
}

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

input[type=text], select {
    width: 100%;
    padding: 2vh 4vh;
    margin: 1vh;
    display: inline-block;
    border: 0.5vh #ffffff;
    border-radius: 1vh;
    box-sizing: border-box;
    border: solid 0.5vh #ffffff;
}

input[type=submit] {
width: 100%;
    padding: 2vh 4vh;
    margin: 1vh;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #ffffff;
}

@media only screen and (max-width: 500px) {
input[type=submit] {
width: 100%;
    padding: 2vh 4vh;
    margin: 1vh;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #ffffff;
}
}

form {
    width: auto;
    margin-left: 0vh;
    margin-right: 0vh;
    text-align: center;
}

<div class="formholder">
<div class="formposition">
<form action="responses.php" method="post">
<input type="text" placeholder= "Test Field" name="TestField" required><br>
<input type="submit">
</form>
</div>
</div>





DIV可以居中,但表单本身并未完全居中。

html - 对齐整个页面内容,使表格稍微偏离中心-LMLPHP
按钮和输入应在页面上完全居中,但不要触摸DIV的左侧,并且在右侧(包括边框)溢出。

全部内容将位于页面中间。由于表单元素偏离中心,因此左侧的空间稍多,并且很明显它们没有居中。

修复程序或指针将不胜感激。

提前致谢 :)

最佳答案

这是因为input[type=submit]上的左右边距。将其更改为margin: 1vh 0以解决此问题,因为您希望其宽度为100%。

输入的实际宽度为100%+ 1vh(右边距)+ 1vh(左边距)。边距不会计算为宽度。



.formholder {
width: inherit;
}

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


input[type=text], select {
    width: 100%;
    padding: 2vh 4vh;
    margin: 1vh 0;
    display: inline-block;
    border: 0.5vh #ffffff;
    border-radius: 1vh;
    box-sizing: border-box;
    border: solid 0.5vh #ffffff;
}

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

input[type=text], select {
    width: 100%;
    padding: 2vh 4vh;
    margin: 1vh 0;
    display: inline-block;
    border: 0.5vh #ffffff;
    border-radius: 1vh;
    box-sizing: border-box;
    border: solid 0.5vh #ffffff;
}

input[type=submit] {
width: 100%;
    padding: 2vh 4vh;
    margin: 1vh 0;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #ffffff;
}

@media only screen and (max-width: 500px) {
input[type=submit] {
width: 100%;
    padding: 2vh 4vh;
    margin: 1vh 0;
    display: inline-block;
    border-radius: 1vh;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border: solid 0.5vh #ffffff;
}
}

form {
    width: auto;
    margin-left: 0vh;
    margin-right: 0vh;
    text-align: center;
}

<div class="formholder">
<div class="formposition">
<form action="responses.php" method="post">
<input type="text" placeholder= "Test Field" name="TestField" required><br>
<input type="submit">
</form>
</div>
</div>

09-25 17:18