問題
17
CSS
positionで要素を上下中央に寄せよう
positionを使えるようになると、簡単に要素を上下中央寄せすることができます。 頻繁に使用するので指定方法を覚えておきましょう。
CSSの問題に挑戦しよう！
問題
「positionで要素を上下中央に寄せよう」
コーディングをしていると頻繁に使いたくなる上下中央寄せを使用する問題です。
作成してあるサイトタイトル「忍者CODE」をpositionプロパティを使って上下中央に表示してみましょう。
あらかじめエディタに書くコード
<header class="header">
<h1 class="header_title">
忍者CODE
</h1>
</header>
¥HTML¥
h1 {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 100px;
background: #6699CC;
}
.header_title {
position: absolute;
}
¥CSS¥
期待する画面
解答と解説（positionで要素を上下中央に寄せよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
positionを使って要素を上下中央寄せするには、
position:absolute;を指定した子要素にtop: 50%;、left 0;、transform: translateY(-50%);
}を指定します。
transformY(-50%);を指定すると、要素の大きさの50%(半分)だけ戻す事ができます。つまり今回であれば、忍者CODEの文字の高さの半分を戻すという事になります。
そうすることで小さなずれが修正され、中心に表示することができます。
補足
今回指定していたpaddingとmarginの指定は、ブラウザで用意されているデフォルトの設定を無効化する為の処理になります。
余白が入ったままになると中心に表示されない場合があるので、あらかじめ設定しておくか、リセットCSSを用意しておきましょう。
