how to center a div vertically and horizontally

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

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.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<div class="container">
2  <div class="child"></div>
3</div>
4
5.container {
6  ...
7  position: relative;
8}
9
10.child {
11  width: 50px;
12  height: 50px;
13  background-color: red;
14  /* Center vertically and horizontally */
15  position: absolute;
16  top: 50%;
17  left: 50%;
18  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
19}