Check out example codes for "how to center a div in css". It will help you in understanding the concepts better.

Code Example 1

//HTML
<div class="parent">
	<span>Hello World</span>
</div>

//CSS
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Code Example 2

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

Code Example 3

/* Answer to: "css vertical align middle" */

/*
  Go to: https://www.w3schools.com/css/css_align.asp
  Here you can learn many ways to align horizontal and vertically!
  My favourite method is below:
*/

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

Code Example 4

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

Code Example 5

# center text
.center {
  text-align: center;
  
border: 3px solid green;
}

Code Example 6

.center
{

  margin: auto;

   
width: 50%;

   
border: 3px solid green;
  padding: 10px;

}

Learn ReactJs, React Native from akashmittal.com