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

Code Example 1

.parent-class {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Code Example 2

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

Code Example 3

<!-- 
	 Simple CSS CENTER DIV Example
 	 
	 * See Fiddle in link for PoC *
-->

<div class="parent">
  <div class="child">
    <p>
      Eh Up Me Duck!
    </p>
  </div>
</div>

<style>
.parent {
  /* Just for aesthetics: see fiddle */
  border: 1px solid black;
  padding: 2px;
}

.child {
  border: 1px solid red;
  width: 50%;
  
  /* This is where the magic happens */
  margin-left: auto;
  margin-right: auto;
  /**********************************/
}

p {
  /* As you do */
  text-align: center;
}
</style>

Code Example 4

#inner {
  width: 50%;
  margin: 0 auto;
}

Code Example 5

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;

}

Code Example 6

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins

Learn ReactJs, React Native from akashmittal.com