ログイン
問題17

positionで要素を上下中央に寄せよう

positionを使えるようになると、簡単に要素を上下中央寄せすることができます。 頻繁に使用するので指定方法を覚えておきましょう。

アイコン画像

問題17: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¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .header_title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
¥CSS¥
            

コメントのアイコン解説

positionを使って要素を上下中央寄せするには、
position:absolute;を指定した子要素にtop: 50%;、left 0;、transform: translateY(-50%);
}を指定します。
transformY(-50%);を指定すると、要素の大きさの50%(半分)だけ戻す事ができます。つまり今回であれば、忍者CODEの文字の高さの半分を戻すという事になります。

そうすることで小さなずれが修正され、中心に表示することができます。
ログインして解答を見る

コメントのアイコン補足

今回指定していたpaddingとmarginの指定は、ブラウザで用意されているデフォルトの設定を無効化する為の処理になります。
余白が入ったままになると中心に表示されない場合があるので、あらかじめ設定しておくか、リセットCSSを用意しておきましょう。
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!