Home
CSS
positionで要素を中央寄せにする方法【CSS】

positionで要素を中央寄せにする方法【CSS】

公開日
2021.11.13
更新日
2022.04.02
positionで要素を中央寄せにする方法【CSS】

どうも!かけちまるです!

Webサイトをコーディングする際に要素を上下左右中央に配置することがよくあります。
方法としては、CSSのpositionプロパティとtransformプロパティを使います。

ちなみにpositionとmarginを使って中央に配置方法もあります。

この記事では、

  • ・上下左右中央寄せにする方法
  • ・上下中央寄せにする方法
  • ・左右中央寄せにする方法
  • ・どんな仕組みで中央に配置されるのか

がわかります。

上下左右中央寄せにする方法

該当要素に以下のCSSを指定すると上下左右中央寄せにすることができます。
top,leftの値を50%にしてtransform: translate(-50%,-50%);を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに!

CSS
コピー
.box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

上下中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
topの値を50%にしてtransform: translateY(-50%);を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに!

CSS
コピー
.box{ position: absolute; top: 50%; left: 0%; transform: translateY(-50%); }

左右中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
leftの値を50%にしてtransform: translateX(-50%);を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに!

CSS
コピー
.box{ position: absolute; top: 0%; left: 50%; transform: translateX(-50%); }

どういう原理で中央に配置されるかというと

中央に配置される方法はわかったが、どういう原理で中央になってるか気になる人向けです。
興味ない人は飛ばしちゃって大丈夫です。

まず押さえておきたいのが以下のポイント!

ポイント
  • positionは要素の左上が基準になる決まり
  • transformtranslate%指定した場合、要素の幅に対しての相対値になる

上記のポイントを踏まえると、単にtopleft50%にすると中央に来ると思いきや要素の基準となる左上が中央に来るのです。
つまり、topleft50%にするだけだとずれちゃうんですね。

そこで、transform: translate(-50%,-50%);を指定することによって要素の半分だけ戻すことができるので中央に配置されるようになるわけなのです。

図にするとこんな感じ

要素が中央に配置される仕組み

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

JSでユーザが使っているブラウザを判定する方法【userAgent】

JSでユーザが使っているブラウザを判定する方法【userAgent】

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処