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

Позиционирование блока по центру контейнера по горизонтали, вертикали.

Проверить код на jsfiddle.net

<div class="parent">
	<div class="child"></div>
</div>
<style>

.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;
}

// 1 вариант
.parent.var--1 .child{        
        left: calc( 50% - 25px );
        top: calc( 50% - 25px );
}

// 2 вариант
.parent.var--2 .child{
        left: 50%;
        top: 50%;
        transform: translateX( -50% ) translateY( -50% );
}

// 3 вариант (сокращённая версия 2)
.parent.var--3 .child{        
        left: 50%;
        top: 50%;       
        transform: translate(-50%, -50%);
}

// 4 вариант
.parent.var--4 {
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
}
.parent.var--4 .child {
        width: 50px;
        height: 50px;  
        background: red;
}

// 5 вариант
.parent.var--5 {
        height: 100px;
        display: grid;
        place-items: center;
        background: blue;
}
.parent.var--5 .child {
        width: 50px;
        height: 50px;  
        background: red;
}

// 6 вариант
.parent.var--6 {
        height: 100px;
        display: grid;
        background: blue;
}
.parent.var--6 .child {
        margin: auto;
        width: 50px;
        height: 50px;  
        background: red;
}

</style>