Check out example codes for "css center image horizontal and vertical flexbox". It will help you in understanding the concepts better.

Code Example 1

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Flex Item Image</title>
.box {
   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%;
   max-width: 350px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/


<div class="box">
   <img src="" width="350" height="250" alt="missing image">


Learn ReactJs, React Native from