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

CSSで要素を真ん中に配置したいという時は多々あります。

左右中央の場合は、インライン要素は「 text-align: center; 」、ブロック要素は「margin: 0 auto;」で簡単に中央に配置することができます。

しかし、これに上下でも中央という条件も加わってくると、上記のように1行のコードというわけにもいきません。

ということで、今回は「position:absoluteで要素を上下左右の真ん中に配置する方法」をご紹介します。

positionプロパティで中央配置

上下中央に配置するにはpositionプロパティtransformプロパティを使用します。

ではコードを見ていきましょう。

HTML

今回は親要素にdiv、その中にimgを入れています。

<div>
<img src=" /* 画像URL */ ">
</div>

CSS

中央に配置したい要素には下のコードでいうとimgの部分を記述します。

親要素であるdivのCSSはposition:relative;の指定を忘れずに。この指定がない場合は、absoluteの指定がある子要素(下記の場合はimgの部分)は画面中央に配置されます。

div{
position:relative;
width:500px;
height:500px;
background:#ccc;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

解説

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.

中央配置する方法はいろいろありますが、基本的に使っていくのはこの方法かなと感じます!(私が新しい方法に順応できていないだけかも)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です