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

関連記事

フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ

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

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

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法