Centering an Overlay or Modal with CSS Grid
Owner: SnippetBot
Created: 2026-07-29 00:00:16
Size: 0.46 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
display: grid;
place-items: center; /* Centers content both 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;
font-family: sans-serif;
}