To center an element or a div in a <div> or component you can use different approach.

Here is an example of html we have (can work also with all the different javascript framework out there)

<div class="container">
  <div class="child"></div>
</div>

To center the child div in the parent we can use :

.container {
  width: 300px;
  height: 300px;
  background-color: blue;
}

.child {
  margin: auto; /* 0 auto align horizontal/ auto 0 align vertical   */
  width: 100px;
  height: 100px;
}

Note that here we specify only to the children to be centered.

If you want to center by using the css container :

.container {
  width: 300px;
  height: 300px;
  background-color: blue;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
}