CSSグリッドを使って文字を画面の上下左右中央に配置する

画面のド真ん中（上下左右中央）に文字をドーンと表示したい時ってありますよね？
CSSグリッドを使ったシンプルな方法をお伝えします。

ソースコード
1. index.html
2. style.css
HTMLとCSS補足

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSSグリッドを使って上下左右中央に文字を表示する</title>
</head>
<body>
    <main>
        <p>見せかけのかっこうなんてつまらんよ</p>
    </main>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
}
 
main{
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
 
    font-size: 5vw;         /* 表示領域幅の5%を1文字のサイズとする */
}

HTMLとCSS補足

今回は文字をブラウザにドーンと中央表示したかったので、bodyタグに対してCSSグリッドを適用させています。

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
}

grid-template-columnsとgrid-template-rowsは通常格子状の1マスのサイズを設定しますが、bodyタグを1つのマスとしたので、最大の幅と高さ（100vwと100vh）をそれぞれ設定しました。

セルの中身であるmainタグ内に段落(pタグ)で文字を入れました。

<main>
    <p>見せかけのかっこうなんてつまらんよ</p>
</main>

上下左右中央揃えにする設定は、このmainタグに対するCSSで行っています。

main{
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
 
    font-size: 5vw;         /* 表示領域幅の5%を1文字のサイズとする */
}

表示文字のサイズ（font-size）ですが、vwという単位を利用して常に画面幅に収まるようにしました。
単位vwは、表示領域の画面幅を100としたときの割合となります。
つまり5vwは、画面幅の5%のサイズで1文字を表示する、という意味になります。

ちなみにfont-sizeを10vwとしてみると以下のように10文字分で画面幅が埋まります。

表示文字数によってfont-sizeは調整してみてください。

参考

グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェイス要素のレイアウトに利用できます。この記事では、 CSS グリ...