Flexbox Centering

1.center-flex {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7/* With gap for multiple children */
8.center-flex-with-gap {
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  gap: 1rem;
13}
14
15/* Column direction */
16.center-flex-column {
17  display: flex;
18  flex-direction: column;
19  justify-content: center;
20  align-items: center;
21  gap: 1rem;
22}