position:absolute;で要素を上下左右中央に配置する方法【CSS】

positionプロパティでabsoluteを指定した時に、どうやって親要素の中央に配置するかという説明です。

「left:50%;」とか「top:50%;」と指定しても、要素の先頭が50%の位置になってしまって、思っている感じの中央寄せにならないんですよね。

「position:absolute;」で上下左右の中央に配置したい時は、次のように指定します。

See the Pen
absolute-center by KUBO (@KUBOGEN)
on CodePen.

ポイントは、「top」「right」「bottom」「left」のそれぞれに「0」を、そして「margin:auto;」を指定することです。