1.container {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}
1.parent {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}
1.parent {
2 position: relative;
3}
4.child {
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 transform: translate(-50%, -50%);
9}
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.container{
2 margin: 0;
3 position: absolute;
4 top: 50%;
5 left: 50%;
6 -ms-transform: translate(-50%, -50%);
7 transform: translate(-50%, -50%);
8 width: /* Define the width here; */
9 height: /* Define the height here; */
10}
11
12/*You have to define the width and height! */
1text-align: center; /*also works for images or anything inside the object (I think)*/