要素を上下左右の中央寄せにする方法
webページをコーディングしているときって、
「背景画像に対してタイトルを中央に持っていきたい」
と思うときが多々あります。
そんなとき、数ある方法の中から私が便利だと感じたものをピックアップしました。
- displayプロパティのtableを利用する
- toransformをプロパティを使用する
- displayプロパティのtableを利用する
スポンサードサーチ
displayプロパティのtableを利用する
私は実は最近これを知ってしまったのですが（tableの使い所をつかめてない）、本当に便利でした。
See the Pen table で上下左右中央配置 by ぺんこ@Webを仕事にしたい人 (@penko6930) on CodePen.
あらまぁなんてシンプル！なんて簡単！
親要素にtableをつけ、子要素にtable-cell,vertical-align:middle;
をつけるだけ。
positionプロパティを利用する
私がデジハリで最初に習ったのはこの方法でした。
動画教材の中で講師がつても丁寧に開設してくれていたので、ですので他は使っておらず、上記のtableも発見が遅れたのですね。
最初は理屈がわからなかったけれど、今はわかるようになりました。
position: relrative; + position:absolute; top50%,left50%のみを使用した場合
親要素（relative）の位置を起点にし、子要素の左上が50％移動します。
そこで・・・
See the Pen transfromを使用した中央配置 by ぺんこ@Webを仕事にしたい人 (@penko6930) on CodePen.
最後にtransformで50％ずつ戻してあげるのですね。
このtransformは、「自分自身の相対位置から50%」という意味です。
スポンサードサーチ
絶対位置+marginを利用する
先程もposition:absolute;を使用しているので、絶対位置ではあるのですが、もっと簡単な方法を見つけました。
top,bottom,left.rightに０を指定して、marginでautoを指定してあげます。
こちらはブロックレベルに有効です。
See the Pen positionを使った中央配置 by ぺんこ@Webを仕事にしたい人 (@penko6930) on CodePen.
上下左右どちらかを消すと、それぞれのセンターよりも実現できます。
他にもたくさん方法があるので、もっと場面毎に使いこなしたいと思います。