会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【Flexbox】要素を上下左右の中央に配置する方法(CSS)

CSS(シー・エス・エス)
この記事は約6分で読めます。

CSSで「画面の上下左右中央に要素を配置したい」と思った時にも、Flexboxが便利です。簡単にできますのでお試しください。

四角形を準備する

まずは、四角形を準備します。ひとまず、以下のような感じにして四角形を準備します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ページ</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
        <div class="box"></div>
</body>

</html>

とりあえずの四角形が配置できました。

コンテナを準備する

次に、四角形を中央に配置するためのコンテナを準備します。背面に画面いっぱいに広がる青背景を準備します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ページ</title>
    <style>
        .container {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: blue;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>

</html>

表示されました!

display: flex;を指定する

赤色の四角形を中央に配置してみます。まずは、display: flex;を指定します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ページ</title>
    <style>
        .container {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: blue;
            display: flex;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>

</html>

要素がflexboxの状態になりました。

align-items: center;(上下中央)

上下左右中央に揃えていきます。上下中央に揃えるためには「align-items: center;」を指定します。

align-items: center;

justify-content: center;(左右中央)

左右中央に揃えるためは「justify-content: center;」を指定します。

justify-content: center;

上下左右の中央揃えにする

つまり、上記の両方を設定することで「上下左右の中央揃えにする」が可能となります。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ページ</title>
    <style>
        .container {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: blue;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>

</html>

上下左右の中央に配置されました!

まとめ

display: flex;
align-items: center;
justify-content: center;

この3行を入れてあげれば、中の子要素を上下左右の中央揃えにすることができます。

ご参考ください😃

0 件のコメント

コメント
タイトルとURLをコピーしました