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

Code Example 1

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

Code Example 2

/* this will center all children within the parent element. */
.parent {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}

Code Example 3

.class {
	text-align: center;
}

Code Example 4

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

Code Example 5

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Code Example 6

text-align: center

Learn ReactJs, React Native from akashmittal.com