CSSで要素を真ん中に配置したいという時は多々あります。
左右中央の場合は、インライン要素は「 text-align: center; 」、ブロック要素は「margin: 0 auto;」で簡単に中央に配置することができます。
しかし、これに上下でも中央という条件も加わってくると、上記のように1行のコードというわけにもいきません。
ということで、今回は「position:absoluteで要素を上下左右の真ん中に配置する方法」をご紹介します。
positionプロパティで中央配置
上下中央に配置するにはpositionプロパティとtransformプロパティを使用します。
ではコードを見ていきましょう。
HTML
今回は親要素にdiv、その中にimgを入れています。
CSS
中央に配置したい要素には下のコードでいうとimgの部分を記述します。
親要素であるdivのCSSはposition:relative;の指定を忘れずに。この指定がない場合は、absoluteの指定がある子要素（下記の場合はimgの部分）は画面中央に配置されます。
解説
position:absolute
真ん中に配置したい要素のpositionプロパティをabsoluteにし、top:50; left:50%に配置します。しかし、画像の軸（？）は左上なので、このままだと下の画像のようになってしまいます。
transform: translate(-50%, -50%);
画像の横幅と縦幅の半分ずつ真ん中によせれば、中央に配置することができるのでtransform: translate(-50%, -50%);と指定します。
完成
See the Pen
position:absoluteで中央配置 by Hiroki Nakamura (@marurain)
on CodePen.
中央配置する方法はいろいろありますが、基本的に使っていくのはこの方法かなと感じます！（私が新しい方法に順応できていないだけかも）
