CSSのみでposition:absoluteがかかっている要素を上下中央配置にする

position:absoluteで浮いている要素を上下中央配置にするやり方。

昔は大変だったが、今ではflexboxを使えば簡単にできる。キーは子要素にdisplay:flexをかけて、縦方向に中心いするためにflex-direction:column、align-items: center;にし、さらにwidthとheightに100%をかける。

幅と高さがない場合中央配置にならないため注意。

単純に中央配置にするだけなら、flexboxを使わなくても実現可能。leftとrightをどちらも0を指定するだけ。

こちらも幅の指定をしないと中央配置にならないため注意。