CSS
Overlay or Modal Centering with CSS Grid
Easily center any overlay or modal element perfectly on the screen using CSS Grid's `place-items` property, providing a clean and efficient solution.
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: grid;
place-items: center; /* Centers children horizontally and vertically */
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 500px;
text-align: center;
}
How it works: This snippet showcases how to perfectly center an overlay or modal element using CSS Grid. By setting `display: grid` on the full-viewport `modal-overlay`, the `place-items: center` property (shorthand for `align-items: center` and `justify-items: center`) effortlessly centers any direct child element within the grid container, making it ideal for modals, dialogs, or loading screens with minimal effort.