Search⌘ K

CSS-Only Modal Centering with Fallbacks

Explore effective CSS techniques to center modal dialogs horizontally and vertically in the viewport without using Flexbox or Grid. Understand how to implement fallback solutions for legacy browsers like IE11 while maintaining smooth positioning during scrolling, all with CSS only and no additional markup or JavaScript.

Problem description

A .modal-backdrop spans the entire viewport and contains a .modal element sized 300px by 200px. The task ...