完璧な中央揃え
CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 48/76。
CSSで、要素を親要素内で水平方向と垂直方向の両方に中央揃えする「完璧な中央揃え」は、よくあるレイアウト上の課題です。Flexboxを使えば、この問題をエレガントかつ簡単に解決できます。justify-contentプロパティとalign-itemsプロパティを組み合わせることで、子要素や親要素のサイズにかかわらず、フレックスコンテナー内で子要素を簡単に中央揃えできます。
Flexboxを使って完璧に中央揃えする方法は次のとおりです。
.container {
display: flex; /* 親要素をフレックスコンテナにする */
justify-content: center; /* 子要素を主軸に沿って水平方向の中央に配置する */
align-items: center; /* 子要素を交差軸に沿って垂直方向の中央に配置する */
}このテクニックを効果的に機能させるには、フレックスコンテナーの高さを明示的に設定してください。コンテナーの高さを明示的に設定しないと、コンテンツの高さまでしかなくなり、垂直方向の中央揃えがはっきりしないことがあります。
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 要素はその中で水平方向にも垂直方向にも完全に中央揃えされます。
チャレンジ
簡単親の区分（<div>）に子の区分（<div>）が含まれるHTMLドキュメントが与えられています。Flexboxを使って、親の区分内で子の区分を完全に中央揃えにするのがあなたの課題です。以下の手順に従ってください。
parentクラスを持つ<div>要素を対象とするCSSルールを記述します。.parent要素のdisplayプロパティをflexに設定し、フレックスコンテナーにします。- 子要素を水平方向に中央揃えにするため、
.parent要素のjustify-contentプロパティをcenterに設定します。 - 子要素を垂直方向に中央揃えにするため、
.parent要素のalign-itemsプロパティをcenterに設定します。 - 垂直方向の中央揃えが見えるように、
.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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSによるスタイリングのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド