CSS: Позиционирование по центру контейнера

https://developer.donnoval.ru/center/

by shunovi

HTML

<div class="parent var--1">
  <div class="child">1</div>
</div>

<div class="parent var--2">
  <div class="child">2</div>
</div>

<div class="parent var--3">
  <div class="child">3</div>
</div>

<div class="parent var--4">
  <div class="child">4</div>
</div>

<div class="parent var--5">
  <div class="child">5</div>
</div>

<div class="parent var--6">
  <div class="child">6</div>
</div>

CSS

.parent {
        width: 100px;
        height: 100px;
        position: relative;
        background: blue;
        float: left;
        margin: 10px;
}
.child {
        width: 50px;
        height: 50px;
        background: red;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        font-weight: bold;
}
.parent.var--1{
  
}
.parent.var--1 .child,
.parent.var--2 .child,
.parent.var--3 .child{
        position: absolute;
        background: red;
}
.parent.var--1 .child{        
        left: calc( 50% - 25px );
        top: calc( 50% - 25px );
}
.parent.var--2 .child{
        left: 50%;
        top: 50%;
        transform: translateX( -50% ) translateY( -50% );
}
.parent.var--3 .child{        
        left: 50%;
        top: 50%;       
        transform: translate(-50%, -50%);
}


.parent.var--4 {
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
}
.parent.var--4 .child {
        width: 50px;
        height: 50px;  
        background: red;
}

.parent.var--5 {
        height: 100px;
        display: grid;
        place-items: center;
        background: blue;
}
.parent.var--5 .child {
        width: 50px;
        height: 50px;  
        background: red;
}

.parent.var--6 {
        height: 100px;
        display: grid;
        background: blue;
}
.parent.var--6 .child {
        margin: auto;
        width: 50px;
        height: 50px;  
        background: red;
}