色々なデバイスでフルスクリーン（表示画面いっぱい）の中央に画像を配置したい

画面上下中央にローディング画像を表示したかったので調べてみました。

前提知識として知っておきたいこと

ビューポート!

最近は、PC以外にスマホ、タブレットなど複数のデバイスがあなたのWEBサイトを閲覧します。ときどき、スマホでWEBサイトを閲覧すると、小さい画面が表示されたりしたことはないでしょうか？そうです。ビューポートが設定されていないからです。ビューポートを使用すると、様々なデバイスの表示に対応することができます。

ビューポートの使用例

width=device-width を追加して、デバイス非依存ピクセルで画面の幅を合わせます。

initial-scale=1 を追加して、CSS ピクセルとデバイス非依存ピクセルが 1:1 の関係になるように指定します。

https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ja

↑とてもわかりやすい説明でしたので、引用させてもらいました。

ビューポートを使用して画面中央に配置する

<meta name="viewport" content="width=device-width, initial-scale=1">

ヘッダに、ビューポートの設定をします。デバイスにより広い、狭いがあるがあるが自動的に画面の幅をデバイスの幅にあわせる設定をしてます。

{
   width: 100vw;
   height: 100vh;
   background-image: url(loading.gif);
   background-repeat: no-repeat;
   background-position: center center;
}

ビューポートの幅と高さに対して１００を設定（画面いっぱい）にしてから、上下中央にローディング画像を配置する。