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.parent {
2 position: relative;
3}
4.child {
5 position: absolute;
6 left: 50%;
7 top: 50%;
8 transform: translate(-50%, -50%);
9}
1.parent {
2 position: relative;
3}
4.child {
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 transform: translate(-50%, -50%);
9}
1/* Centering an element without flexbox */
2.parent-element {
3 position: relative;
4}
5
6.child-element {
7 position: absolute;
8 left: 50%;
9 top: 50%;
10 transform: translate(-50%, -50%);
11}
12
13/* Centering an element using flexbox */
14.parent-element {
15 display: flex;
16 align-items: center;
17 justify-content: center;
18}
1.element {
2 position: absoloute;
3 margin: auto;
4 left: 0;
5 right: 0;
6 top: 0;
7 bottom: 0;
8}