サンプル

左右センタリング①（インライン要素）

詳細参考

左右センタリング①（インライン要素） text-align:center;
「text-align:center;」により、子インライン要素が左右センタリングされる。
親となるブロックレベル要素に「text-align:center;」を指定する。

左右センタリング②（ブロックレベル要素）

詳細参考

左右センタリング②（ブロックレベル要素） margin: 0 auto;
「margin: 0 auto;」により、そのブロックレベル要素がセンタリングされる。
サイト全体のレイアウトを左右中央寄せにするときなどに使われる。
widthの指定が必須だが、単位「%」で指定すればレスポンシブWebデザインへの対応が可能。
PCビューで最大幅を決めるため、合わせてmax-widthを使うこともある。

左右センタリング③

詳細参考

左右センタリング③ display: inline-block;
「text-align:center;」により、「display: inline-block;」指定した子ブロックレベル要素（水色）がセンタリングされる。
widthを決めず、内容量に応じた幅でブロックレベル要素を左右センタリングしたいときに使う。
ブロック幅は内容によって可変・ブロック自体はセンタリング。
子ブロックレベル要素の子インライン要素の配列は、子ブロックレベル要素の「text-align:」に従う。

上下センタリング①

詳細参考

上下センタリング① vertical-align: middle;
左右センタリング①との組み合わせ
「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。
親となるブロックレベル要素に「display: table;」を指定する。
左右の配置は、自ブロックレベル要素の「text-align:」に従う。

上下センタリング②

詳細参考

上下センタリン②グ vertical-align: middle;
左右センタリング②との組み合わせ
「vertical-align: middle;」により、「display: table-cell;」指定した自ブロックレベル要素が上下センタリングされる。
親となるブロックレベル要素に「display: table;」を指定する。
これは、親となるブロックレベル要素が「margin: 0 auto;」によりセンタリングされている場合。

上下センタリング③

詳細参考

上下センタリング③ vertical-align: middle;
左右センタリング③との組み合わせ
孫ブロックレベル要素（水色）が上下左右センタリングされる。
「vertical-align: middle;」により、「display: table-cell;」指定した子ブロックレベル要素が上下センタリングされる。
親となるブロックレベル要素に「display: table;」を指定する。
子ブロックレベル要素の「text-align:center;」により、
「display: inline-block;」指定した孫ブロックレベル要素（水色）が左右センタリングされる。
widthを決めず、内容量に応じた幅でブロックレベル要素を左右センタリングしたいときに使う。
孫ブロック幅は内容によって可変・孫ブロック自体はセンタリング。
孫ブロックレベル要素内のインライン要素の配列は、孫ブロックレベル要素の「text-align:」に従う。