【最新】CSSで画面のど真ん中！上下左右中央に配置する簡単な方法

CSSでの中央配置をしたことがありますか？

中央配置はtransform()などを使って行うことができます。

しかしこの記事では、もっと簡単に中央配置の方法をする方法、そして中央配置した要素の幅指定のやり方を紹介します。

CSSの中央配置のコード

基本的にはinsetとmargin:autoだけを使います。

.center_dom{
  position: fixed;
  inset: 0;
  margin: auto;
}

insetとは、top,left,bottom,rightを一括指定するプロパティで、inset:0;とは、すべてを0にするという意味があります。

そこでmargin:auto;をすることによって、上下、左右で中央の位置に配置されるようになります。

実際にサンプルを用意しました。

下の要素の中に、中央配置が行われていることがわかります。
※このサンプルのコードはこの後紹介します

中央配置する要素のサイズの設定方法

先ほどのサンプルは、insetとmarginだけを使ったわけではありません。

次のCSSを使っています。(一部省略)

inset : 0;
margin: auto;
height: fit-content;
width : fit-content;

heightとwidthにそれぞれfit-contentをしています。これは、要素サイズを内部の最小サイズに合わせるというものになります。

ただ、通常のモーダルではさらに大きくする必要があるので、これではまだ足りません。

次に、モーダル用のサンプルを見てみましょう。

固定幅でかつスクロールに対応させています。

「widthとheightで300pxとか指定しただけじゃない？」
と思うかもしれません。しかしこれでは、あまりにも画面サイズが小さいとレイアウトが崩れてしまいます。

もしこの記事をパソコンで見ていたらウィンドウの横幅を縮めてみてください。

widthが自動的に縮小されているのがわかるでしょうか。

その仕組みはこのCSSです。

width     : 500px;
height    : 300px;
max-width : 100%;
max-height: 100%;

max-widthとmax-heightを指定することにより、画面が小さい状態でもレイアウトが崩れることなく表示が可能です。

※スクロールはoverflow:auto;で行っています。

ブラウザの対応状況

insetプロパティの対応状況はこちらです。

※2022/12時点のデータです

全体の90%以上が対応しているとのことなので、ほぼ気にすることなく代替することができる手段です。

最新バージョンで対応していないのはIEのみです。(最新バージョンといってもサポート終了しているので何とも言えないですが…)

transformの対応は95%以上なので、transformと比較すると若干劣りますが、誤差程度でほとんど気にする必要はないかと思います。

(最終的には利用者層やデバイスなどをみて判断してください。)

最後に

transformを利用するよりもクライアントの負荷は低下します。

かつ要素サイズの指定など、汎用性も非常に高いので是非利用してみてください。