CSSで子要素を親要素の中央に配置する方法

positionを使う方法とflexを使う方法があります。

HTML

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

positonを使う場合

CSS

.parent {
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom :0;
    margin:  auto;
}

※子要素に高さや幅を設定していない場合は、親要素と同じ大きさになります。

flexを使う場合

CSS

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 100px;
    height: 100px;
}