1.container {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}
1.center {
2 position: fixed;
3 top: 50%;
4 left: 50%;
5 transform: translate(-50%, -50%);
6}
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/* 2 Ways to center a div in css */
2/* Display Flex */
3.center {
4 display: flex;
5 justify-content: center;
6 align-items: center;
7 min-height: 100vh;
8}
9
10/* Display Grid */
11.center {
12 display: grid;
13 place-items: center;
14 min-height: 100vh;
15}