Problem: CSS-Only Modal Centering with Fallbacks
Problem description
A .modal-backdrop spans the entire viewport and contains a .modal element sized 300px by 200px. The task is to center the .modal horizontally and vertically in the viewport at all times, including during scrolling, using only CSS, without Flexbox or Grid, and providing a fallback for IE11.
Goal
Ensure the modal remains perfectly centered in the viewport on both axes, in modern and legacy browsers, without layout shifts on scroll.
Constraints
You may only use CSS on existing elements; Flexbox and Grid are disallowed, and no JavaScript or additional wrappers may be introduced.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: CSS-Only Modal Centering with Fallbacks
Problem description
A .modal-backdrop spans the entire viewport and contains a .modal element sized 300px by 200px. The task is to center the .modal horizontally and vertically in the viewport at all times, including during scrolling, using only CSS, without Flexbox or Grid, and providing a fallback for IE11.
Goal
Ensure the modal remains perfectly centered in the viewport on both axes, in modern and legacy browsers, without layout shifts on scroll.
Constraints
You may only use CSS on existing elements; Flexbox and Grid are disallowed, and no JavaScript or additional wrappers may be introduced.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.