CSSによる上下や左右の中央寄せの種類

・左右の中央揃え
１.text-align:center
　〇中身のテキストや画像といったインライン要素の中央寄せ
　☓ブロック要素はできない
　　セレクタはブロック要素である親要素を指定する。

２.margin: 0 auto;　margin-right:auto;　margin-left:auto;
〇ブロック要素の中央寄せ(widthの指定が必須)
☓インライン要素には余白がないため使えない
※(display:blockでブロック要素にすれば使える)
　　
３.display: inline-block;
ブロック自体は中央寄せ・中身は左揃え

上下から中央寄せ
１、vertical-align: middle;
　　〇インライン要素

２．position
ブロック要素

上下左右から中央寄せ
１．vertical-align: middle;
　「vertical-align」が使えるのはインライン要素・テーブルセルのみ
　 上下中央寄せにしたいテキストを内包する要素にdisplay: table-cell;を指定。

２．position: absolute; + margin: auto;
　　left、width、rightがauto以外である
　　margin-leftとmargin-rightがautoである
　　ブロックにはwidth,height指定が必須です。
　　あまりよくない仕方である。

３．transform

４．display: flex;
左右中央揃え‥justify-content: center;
上下中央揃え‥align-items: center;

flex　transform
ブラウザによっては対応していないものがあり、「ベンダープレフィクス」というものを付ける場合があります。

　主要ブラウザのベンダープレフィックス
-moz-　　　Firefox
-webkit- 　　Google Chrome、Safari
-o-　 　　　 Opera
-ms-　　　　Internet Explorer

CSSによる横並びの種類