できる！中央寄せ

全6回

実務に頻出する要素を中央に寄せるさまざま方法を解説。同時になぜそうなるのかを仕様から、きちんと読み解きます。ただ「寄せる」から「わかって寄せる」実装を目指しましょう。

最終回上下左右中央寄せ 2015年8月27日

連載の最終回は、これまで説明した手法を利用して、要素を左右上下の中央に配置する方法を解説します。わからない点があれば、その手法を詳しく解説している回を読み直してみるのもよいでしょう。

今回は上下中央寄せの手法のうち「絶対配置とtranslate」「テーブルレイアウト」「Flexbox」を利用した3つの方法を紹介します。新しい環境で使える手法です。

絶対配置とネガティブマージンを利用した手法、絶対配置と上下marginにautoを指定する手法を解説します。それぞれの手法の使用できる条件、またなぜそうなるのかという仕組みから理解しましょう。

今回からは上下中央寄せを実現する方法を解説。紹介する手法は主に9つです。まずは、単純な実装から順に紹介します。上下padding、line-heightを利用したインラインレベルコンテンツの配置などです。

左右中央寄せの手法のうち、インラインブロックを利用する方法、Flexboxを利用する方法の2つを解説します。細かなコントロールができるか、できないかは、仕様と実装の理解にかかっています。

運営会社