Three simple ways to center CSS Div

The first

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

<div
     class="parent"
     style="background: blue; width: 500px; height: 250px;"
     >
    <div
         class="child"
         style="color: white;"
         >
      I'm center
    </div>
</div>

The second

.container-flexbox {
    align-items: center;
    display: flex;
    justify-content: center;
}

<div
     class="container-flexbox"
     style="background: green; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center
    </div>
</div>

The third

.container-grid {
    display: grid;
    place-content: center;
}

<div
     class="container-flexbox"
     style="background: orange; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center
    </div>
</div>