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

Code Example 1

display: flex;
align-items: center;
justify-content: center;

Code Example 2

.box.flex {
  display: flex;
  justify-content: center;
}

Code Example 3

section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
}

Code Example 4

.parent {
  display: flex;
  justify-content: flex-end;
}

Code Example 5

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Flex Item Image</title>
<style>
.box {
   width:80%;
   min-height:80vh;
   margin:auto;
   border:1px solid;
   display: flex;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
}
.box img {
   display: block;
   width: 80%;
   min-width:100px;
   max-width: 350px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}
</style>

</head>
<body>

<div class="box">
   <img src="http://via.placeholder.com/350x250" width="350" height="250" alt="missing image">
</div>

</body>
</html>

Code Example 6

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}

Learn ReactJs, React Native from akashmittal.com