問題

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を用意しておきましょう。

さらにスキルアップしたい方は公式LINEから「CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断