Check out example codes for "center div horizontally and vertically". It will help you in understanding the concepts better.

Code Example 1

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Code Example 2

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Code Example 3

div.center{display:block;margin:auto;width:50%;}
p.center{text-align:center;}

Code Example 4

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

Learn ReactJs, React Native from akashmittal.com