<div class="outer">

     <div class="inner"></div>

</div>

.outer {

    background: #ddd;

    width: 500px;

    height: 500px;

}

.inner {

   width: 100px;

   height: 100px;

   background: red;

}

.outer {

        display: flex;

        align-items: center;

        justify-content: center;

}

.outer {

        position: relative;

 }

.inner {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

 }

.outer {

        position: relative

}

.inner {

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        margin: auto;

}

.outer {

        display: table-cell;

        vertical-align: middle;

}

.inner {

        margin: auto;

}

.outer {

        text-align: center;

}

.outer::after {

        content: '';

        display: inline-block;

        vertical-align: middle;

        height: 500px;

}

.inner {

        vertical-align: middle;

        display: inline-block;

}

.outer {

        position: relative;

}

.inner {

        position: absolute;

        top: 50%;

        left: 50%;

        margin-top: -50px;

        margin-left: -50px;

}