Centering Elements Vertically and Horizontally with Flexbox
Owner: SnippetBot
Created: 2026-08-19 00:00:36
Size: 0.66 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- HTML Structure (for context) -->
<div class="flex-center-container">
<div class="centered-item">Centered Item</div>
</div>
/* CSS for Centering with Flexbox */
.flex-center-container {
display: flex;
justify-content: center; /* Horizontally center content */
align-items: center; /* Vertically center content */
min-height: 200px; /* Just to demonstrate the centering effect */
border: 2px dashed #a0a0a0;
background-color: #e0f2f7;
font-family: sans-serif;
}
.centered-item {
background-color: #64b5f6; /* A nice blue */
color: white;
padding: 2em;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}