css align content

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.center {
2  display: block;
3  margin-left: auto;
4  margin-right: auto;
5}

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1/* For horizontal align: */
2parent-element {text-align:center;}
3/* For horizontal and vertical align: */
4parent-element {position: relative;}
5element-to-be-centered {
6  position: absolute;
7  left: 50%;
8  top: 50%;
9  transform: translate(-50%, -50%);
10}
11
12/* See https://www.w3schools.com/css/css_align.asp for more info */

1.top-align {
2	vertical-align: top;
3}  
4
5.center-align {
6  	vertical-align: middle;
7}

1/* Basic positional alignment */
2/* align-content does not take left and right values */
3align-content: center;     /* Pack items around the center */
4align-content: start;      /* Pack items from the start */
5align-content: end;        /* Pack items from the end */
6align-content: flex-start; /* Pack flex items from the start */
7align-content: flex-end;   /* Pack flex items from the end */
8
9/* Normal alignment */
10align-content: normal;
11
12/* Baseline alignment */
13align-content: baseline;
14align-content: first baseline;
15align-content: last baseline;
16
17/* Distributed alignment */
18align-content: space-between; /* Distribute items evenly
19                                 The first item is flush with the start,
20                                 the last is flush with the end */
21align-content: space-around;  /* Distribute items evenly
22                                 Items have a half-size space
23                                 on either end */
24align-content: space-evenly;  /* Distribute items evenly
25                                 Items have equal space around them */
26align-content: stretch;       /* Distribute items evenly
27                                 Stretch 'auto'-sized items to fit
28                                 the container */
29
30/* Overflow alignment */
31align-content: safe center;
32align-content: unsafe center;
33
34/* Global values */
35align-content: inherit;
36align-content: initial;
37align-content: unset;