Home
CSS
translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

公開日
2021.11.06
更新日
2022.04.02
translateを使わずにpositionで要素を中央寄せにする方法

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

CSSでpositionで中央寄せにしたい時大体はtransform: translate(-50%,-50%);を指定すると思います。

しかし、乗算などを表現するmix-blend-modeを使った要素にtransform: none;以外を指定するとスタックコンテキストというのが形成されてしまいmix-blend-modeがうまく適応されなくなってしまうことがあります。

そこで今回はtransform: translate(-50%,-50%);を指定しなくてもpositionで中央寄せにする方法をご紹介します。

この記事では、

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

がわかります。

中央寄せはそれぞれこんな感じ

最初に実装例をまとめておきます。

順番は、

  • ・上下中央
  • ・左右中央
  • ・上下左右中央
  • transform: translate(-50%,-50%);を使って上下左右中央

の順番で実装しています。

上下中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
topbottomの値を0にしてmargin: auto;を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに!

CSS
コピー
.box{ position: absolute; top: 0; bottom: 0; margin: auto; }

左右中央寄せにする方法

該当要素に以下のCSSを指定すると上下中央寄せにすることができます。
leftrightの値を0にしてmargin: auto;を指定してあげればOKです。
※基準となる要素にposition: relative;を忘れずに!

CSS
コピー
.box{ position: absolute; left: 0; right: 0; margin: auto; }

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

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

CSS
コピー
.box{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

おまけ(transformを使う方法)

この記事の趣旨とずれてしまうのですがtransform: translate(-50%,-50%);を使って上下左右中央寄せにする方法もご紹介します。

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

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

もうちょっと詳しく知りたい人はこちらの記事をどうぞ!

おわり

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

関連記事

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

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

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

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【macOS】よく使うターミナルコマンド一覧

【macOS】よく使うターミナルコマンド一覧

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

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

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる