【備忘録】position:absolute;の上下中央配置、上下左右中央配置、左右中央配置（css）

よく使うのに「どうやるんだっけ？？」と忘れてしまうことがあるシリーズなので備忘録として記事にします。
そもそものposition:relative;とか親要素子要素の関係は記載しておりません。記述内容だけサクッとコピペしたい用だとお考えください。

上下中央配置のcss

子要素class{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

上下左右中央配置のcss

子要素class{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

左右中央配置のcss

子要素class{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

うまくいかない場合は!importantを使う必要もあります。またdivやimg、見出しタグなどで使う場合は、その要素のmarginやpaddingも関係してくるので、上記コードをコピペで使うだけでは良い感じに配置されないこともあります。