center div horizontally and vertically

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/*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! */

1body {
2	display: flex;
3	min-height: 100vh;
4	flex-direction: column;
5	justify-content: center;
6	align-items: center;
7}
8/* to make "align-items: center" work: use "min-height: 100vh;"
9100vh = 100% Viewport Height */

1/*ADD MARGIN auto to left and right*/
2.box1{
3    width:80%;
4    margin:0 auto;
5}