position: absolute;した要素を中央位置に配置する

よく忘れるのでメモ。
top: 50%　と　 transform: translateY(-50%)　を併用することで、上下中央に要素を配置できる。

◆上下左右中央

div{
    position: relative;
    .hoge{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
}

◆上下中央

div{
    position: relative;
    .hoge{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

◆左右中央

div{
    position: relative;
    .hoge{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}