CSS｜position: absolute; で中央揃え（配置）にする 「上下左右」「上下のみ」「左右のみ」

普段はSCSSで @mixin して使用していたり、そもそも flex だったり grid だったりですぐ忘れてしまうのでメモ。

細かい説明は省略しますが、親の要素が position: relative; であることが前提です。

上下左右ともに中央

* {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上下のみ中央

* {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
}

左右のみ中央

* {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

デモ

今回は色々と省略しましたが、本来は -webkit や -ms 等のベンダープレフィックスを合わせて使用する。

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child el_01">上下左右中央</div>
    </div>
    <div class="parent">
        <div class="child el_02">上下中央</div>
    </div>
    <div class="parent">
        <div class="child el_03">左右中央</div>
    </div>
</div>

CSS ( SCSS )

.wrapper {
    display: grid;
    grid-template-columns: 100%;
    gap: 2.5rem;
    width: 100%;
    
    @media screen and (min-width: 700px) { 
        grid-template-columns: repeat(3, 1fr);
    }
}
.parent {
    position: relative;
    border: 1px solid lightgray;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;

    .child {
        position: absolute;

        &.el_01 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        &.el_02 {
            top: 50%;
            left: 0%;
            transform: translateY(-50%);
        }
        &.el_03 {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

結果