CSS

要素を中央に配置しよう

要素を中央に配置する方法について

  • 中央への配置例
  • フレックスボックスを使った方法

中央への配置例

・とある要素の中で中央にdiv要素を配置しようと思います。様々なやり方があり一番手っ取り早くできそうなのは絶対配置をしていく方法です。

・ヘッダーの中央にディブを配置したい場合は、ヘッダーにposition: relative; を指定して、divに対してはposition: absolute; と指定して配置する位置をcalcで計算してあげればいいでしょう。

positionで要素の位置を変えよう

・ただこの方法だと大きさを変更したい場合、レイアウトが崩れてしまいますので変更があると毎回計算をやり直さなければいけません。

Calcで単位が違う計算をしてみよう

フレックスボックスを使った方法

・そういった場合もflexboxを使うことができます。

・まずヘッダーにdisplay: flex;の指定をしてあげます。

・中央揃えにしたい場合は親要素のヘッダーに対してjustify-contentとalign-itemsをcenterにしてあげるといいでしょう。

・これはそれぞれ子要素を主軸方向に整えるjustify-contentと交差軸方向で中央揃えにするalign-itemsを真ん中に指定することによってブラウザの大きさを変えたり、中のdivの大きさを変えたとしても常にそのdiv要素は真ん中に来るようになります

-広告-

 

 






-CSS