完璧な中央揃え

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 48/76。

CSSで「Perfect center」を実現し、要素をその親要素内で水平方向および垂直方向の両方にcenterすることは、一般的なレイアウト上の課題です。Flexboxは、この問題に対するエレガントで簡単な解決策を提供します。justify-contentプロパティとalign-itemsプロパティを組み合わせることで、childまたはparentのサイズに関係なく、flex container内でchild要素を簡単にcenterできます。

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

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

このテクニックを効果的に機能させるには、flex コンテナーに定義された高さがあることを確認してください。コンテナーの高さが明示的に設定されていない場合、その高さは content と同じ分だけになり、vertical centering が明確に見えないことがあります。

HTMLでこのテクニックを使用する方法の例を次に示します。

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

.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 に設定して、子要素を垂直方向に中央揃えにします。
垂直方向の中央揃えが visible になるように、.parent 要素の height を 200px に設定します。

自分で試してみよう

<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>