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

Code Example 1

.container {
    position: relative;
    float: right;
    width: 100%;
    height: 250px;
    overflow: hidden;

.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: 100%;
    /* height: auto; */
    /* min-height: 100%; */
    margin-right: -50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    -o-object-fit: contain;

Code Example 2

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

Code Example 3

Use a container element and set a specific max-width.
A common width many websites use is 960px.
To actually center the page, add margin: auto.
The following example will center the website on screens that are wider than
500px.On screens that are less than 500px wide,
it will span the whole of the page:

.content {
  max-width: 500px;
  margin: auto;

<div class="content">
  <!-- Page content -->


Learn ReactJs, React Native from