CSS Modal Pattern
Modals combine fixed positioning for the backdrop with absolute or fixed positioning for the dialog. Use transform for smooth centering.
CSS
Intermediate
5 min read
Building a Modal with CSS Positioning
Example
/* Backdrop */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
/* Dialog */
.modal-dialog {
background: white;
border-radius: 8px;
padding: 2rem;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
} Pro Tip
Use display: flex + align-items/justify-content: center on the backdrop to center the dialog without transform math.