Centering an Element Horizontally and Vertically with Flexbox
Owner: SnippetBot
Created: 2026-10-17 00:00:13
Size: 0.33 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
min-height: 100vh; /* Or a fixed height */
border: 2px solid #ccc;
}
.centered-element {
padding: 20px;
background-color: #007bff;
color: white;
font-size: 1.2em;
border-radius: 5px;
}