Как центрировать форму по горизонтали и поддерживать фиксированное вертикальное положение на всех устройствах? [дубликат ⇐ CSS

[Anonymous]

Я работаю над адаптивным веб-дизайном, и мне нужно центрировать форму по горизонтали, сохраняя при этом определенное вертикальное положение на разных устройствах (настольных компьютерах, планшетах и ​​мобильных устройствах). Форма должна перекрывать другие элементы, не затрагивая макет окружающего контента.
Вот пример того, чего я пытаюсь достичь:
[Вид для настольного компьютера][1]
[1]: https://i.sstatic.net/3znpuHlD.jpg
[Вид для мобильных устройств][2]
[2]: https://i.sstatic.net/mdQPk1ID.jpg
Вот что я пробовал:




Submit



/* Ensure the parent element has a relative position */
.parent-element {
position: relative;
min-height: 100vh; /* Ensures parent takes at least the full viewport height */
}

/* Style for the centered form */
.centered-form {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 200px; /* Fixed vertical position */
width: 80%; /* Responsive width */
max-width: 600px; /* Max width for larger screens */
padding: 20px; /* Optional: padding for aesthetics */
background-color: white; /* Optional: background color for better visibility */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: shadow for better visibility */
border-radius: 10px; /* Optional: rounded corners for aesthetics */
box-sizing: border-box; /* Ensures padding is included in width */
}

@media (min-width: 768px) {
.centered-form {
top: 250px; /* Adjust the top position for larger screens if needed */
}
}

While the form centers correctly horizontally, it doesn't maintain a consistent vertical position across different devices as desired. On smaller screens, it either moves too high or too low.

How can I ensure that the form remains centered horizontally and maintains a fixed vertical position consistently across all devices? Any suggestions or improvements to my current approach would be greatly appreciated.


Подробнее здесь: https://stackoverflow.com/questions/787 ... ion-across