完璧な中央揃え

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 48/76。

CSSにおいて、要素を親要素の中で水平・垂直方向の両方で中央に配置する「完全な中央揃え」を実現することは、一般的なレイアウトの課題です。Flexboxはこの問題に対して、エレガントで分かりやすい解決策を提供します。justify-contentプロパティとalign-itemsプロパティを組み合わせることで、子要素や親要素のサイズに関係なく、フレックスコンテナ内の中央に子要素を簡単に配置できます。

Flexboxを使用して完璧な中央揃えを実現する方法は次のとおりです：

.container {
    display: flex; /* 親要素をフレックスコンテナにします */
    justify-content: center; /* 子要素を主軸に沿って水平方向に中央揃えにします */
    align-items: center; /* 子要素を交差軸に沿って垂直方向に中央揃えにします */
}

このテクニックを効果的に機能させるには、flexコンテナに高さが定義されていることを確認してください。コンテナの高さが明示的に設定されていない場合、コンテナの高さはそのコンテンツと同じ高さにしかならず、垂直方向の中央揃えが明確に反映されない可能性があります。

HTMLでこのテクニックを使用する例を以下に示します：

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* コンテナに特定の高さを設定します */
    border: 1px solid black; /* オプション：視覚化のためにボーダーを追加します */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

この例では、.container要素の高さは300pxで、.child要素はその中で水平方向および垂直方向の両方で完全に中央に配置されます。

チャレンジ

簡単

親の division (<div>) と、その中に含まれる子の division (<div>) を持つ HTML ドキュメントが与えられます。あなたのタスクは、Flexbox を使用して、子の division を親の division 内で完全に中央に配置することです。以下の手順に従ってください：

parent クラスを持つ <div> 要素をターゲットにする CSS ルールを記述します。
.parent 要素の display プロパティを flex に設定して、フレックスコンテナにします。
.parent 要素の justify-content プロパティを center に設定して、子を水平方向に中央揃えにします。
.parent 要素の align-items プロパティを center に設定して、子を垂直方向に中央揃えにします。
垂直方向の中央揃えが見えるように、.parent 要素に 200px の height を指定します。

チートシート

Flexboxを使用して要素を水平方向と垂直方向の両方で完全に中央揃えにするには、justify-content: centerとalign-items: centerを組み合わせます：

.container {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    height: 300px; /* 垂直方向の中央揃えを可視化するために高さを定義 */
}

垂直方向の中央揃えをはっきりとさせるには、フレックスコンテナに高さを定義する必要があります。

自分で試してみよう

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>