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.parent {
2 position: relative;
3}
4.child {
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 transform: translate(-50%, -50%);
9}
1/* No Flexbox */
2.parent {
3 position: relative;
4}
5.child {
6 position: absolute;
7 top: 50%;
8 transform: translateY(-50%);
9}
10
11/* With Flexbox */
12
13.parent {
14 display: flex;
15 flex-direction: column;
16 justify-content: center;
17}
18
19
20
1/*Remove comment to become a better programmer. */
2/* No Flexbox */
3.parent {
4 position: relative;
5}
6.child {
7 position: absolute;
8 top: 50%;
9 transform: translateY(-50%);
10}
11
12/* With Flexbox */
13
14.parent {
15 display: flex;
16 flex-direction: column;
17 justify-content: center;
18}
19
1// grid
2
3.parent {
4 display: flex;
5 align-items: center;
6 justify-content: center;
7}
8
9//flex box
10
11.parent {
12 display: flex;
13 align-items: center;
14 justify-content: center;
15}
16
17// position
18
19.parent {
20 position: relative;
21}
22
23.child {
24 position: absolute;
25 left: 50%;
26 right: 50%;
27 transform: translate(-50%, -50%);
28}
29