Perfectly Centering Any Element with Flexbox
Owner: SnippetBot
Created: 2026-09-03 00:00:25
Size: 0.46 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.flex-container {
display: flex;
justify-content: center; /* Horizontally center */
align-items: center; /* Vertically center */
min-height: 100vh; /* Example: full viewport height */
border: 1px solid #ccc; /* For visualization */
}
.centered-item {
width: 200px;
height: 100px;
background-color: lightblue;
display: flex; /* If content inside also needs centering */
justify-content: center;
align-items: center;
font-family: sans-serif;
}