CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

[coliss]

CSSでの中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法。

[ejointjp]

CSSって簡単なことでもハックまがいなことをしないと実現できなくて、敷居高すぎるよね

[everybodyelse]

令和の時代になっても、なぜ我々は未だに中央揃えに悩まされなければならないのか。

[fujis_a]

“IEを除く、すべてのブラウザでサポート”

[coppieee]

本文にも書いてあるけど、"insetプロパティは、top, right, bottom, leftの各プロパティに対応する省略形"なので、top, right, bottom, leftそれぞれに0指定していたのが楽になっただけで新しい方法ではないよね？

[sippo_des]

一旦、何が正しいのか、ここらへんでいったん、いったん、、

[dazed]

position: fixed; に inset: 0; ね。初めて聞くし絶対忘れそう。

[Funyapu]

やっときた... https://caniuse.com/?search=inset

[diveintounlimit]

大昔からmargin:autoでいけるはずだったんだが、まともに対応してるブラウザが無かったんだよな。

[ku__ra__ge]

top:0; bottom:0; left:0; right:0; margin:auto; で中央配置になるのが直感的かというとそれもどうかと。flexのalign-self:center;みたいなのがあればいいんだが。

[primedesignworks]

敷居が高いブコメの人って、何か CSS に対して過去に不義理なことでもしたんだろうか。

[KoshianX]

ふむ、いまはこんな書き方でいいのか。あとでこれに直してみよう

[yoshi-nkyma]

“CSSの中央揃えで、最も万能で信頼できる実装テクニック”

[shinagaki]

トップブコメに "ハックまがいなこと" ってあるけど、最近はほぼ改善されてシンプルになってるぞ

[Rishatang]

わざわざこれ使わなくてもFlexでいいと思う。未だに中央揃えが難しいと思っている人はFlexを知らないだけだと思ってる。Flexが難しいと言うなら知らん。

[makimakiJP]

<MARQUEE>いやホント、令和3年にホッテントリ上がってんのグッとくるわ</MARQUEE>

[pmint]

insetは位置指定。縦書きでも通用するよう上下左右の定義を見直したシンタックスシュガー。marginやwidthなども再定義されてる。やってることはwidth・height指定してるのに4隅の位置指定もする矛盾したアレで新しくはない。

[guldeen]

今はもう、タグをポチポチ打って揃える時代じゃないのね(スマホ対応デザインとかもあるだろうから)。それにしても、CSSは何度聞いても判りづらい

[spark7]

テーブルレイアウトの昔なら上下中央で悩まなかったのに。5つて。「現在主流の5つのテクニック」

[ywv]

新しいというかIEが死んだから大手を振れるようになったプロパティがinsetだ。

[kuzumaji]

insetは初めて聞いた…。ブラウザが可変故に令和になっても未だに中央配置は呪いのようにつきまとう問題ねぇ。

[bleu-bleut]

css tips::centering

[posmoda]

左右中央ぞろえはまだわかるけどなんでこれで上下中央になるのかわからん。

[ngmy]

CSSの気持ちが全然わからなくて、何やるにしても調べてDeveloper Toolで確かめてを繰り返してハックっぽいコードが出来上がるんだけど、CSS強強になれば体系的に理解でき応用できコードから見た目が見えるようになるのか？

[basseyboost]

何度も同じネタを見てる気がするけどこれをスタンダードにしてほしい！わかりやすい！

[marony0109]

これは良いことを聞いた

[Falky]

え？全然わからん。insetがtop, right, bottom, leftのショートハンドだとして、inset使うとtranslate()が不要になる理屈が謎。あとで仕様書読むか。。。//個別に書くと、4方向が書いた順番に適用されるからズレるってことか…？

[GiveMeChocolate]

なるほどー

[iww]

毎年新しい方式ができてるけど、平均で何年くらい持つものなんだろうか。 今はもう崩れてしまう方式とかどのくらいあるのかな

[aliliput]

素晴らしいじゃん

[kudakurage]

便利そう

[strawberryhunter]

insetでtop, right, bottom, left を一括で指定できるのか。そこに0を指定して、margin: autoで上下左右中央になるのは直感的なのか？