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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

PHPでURLやパラメータを取得する方法

PHPでURLやパラメータを取得する方法

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

Three.jsにおけるシェーダー(GLSL)の基本知識

Three.jsにおけるシェーダー(GLSL)の基本知識