<?xml version="1.0" encoding="utf-8"?>

Position modals in the center

Position modals in the center  Bad Practice
Position modals in the center  Best Practice

Centering modals that aren't fullscreen is generally the most effective approach. On mobile, aligning modals both vertically and horizontally in the center helps them pop, making it clear that they demand user attention. For desktops, while it's still good to center the modal horizontally, you might want to position it slightly toward the top.

This isn't just about aesthetics; it also ensures that the modal stays put even if the browser window gets resized. Keeping the modal stable contributes to a seamless user experience, reducing any possible friction or confusion.

Pro Tip: This rule does not apply to popovers — they are better off being displayed close to the interactive elements that trigger them.

Improve your UX & Product skills with interactive courses that actually work