インライン要素とブロック要素

●インライン要素

※他にもインライン要素はあり一部のみ記載

〇text-align: center; 〇vertical-align:center

・特徴
・要素の前後に改行が入らず、インライン要素同士横に並ぶ
・横幅や高さを指定できない(※1)
・ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

●ブロック要素

※他にもインライン要素はあり一部のみ記載

×text-align: center;　〇margin: 0 auto;　　margin-right: auto;　　margin-left: auto;

横並びの要素を基準にするならば、インライン要素やインラインブロック要素にして、vertical-align:centerでOKです。
親要素を基準に中央寄せしたい場合は、親要素に高さ、display: table-cell、vertical-align:centerを指定します。

・特徴
・要素の前後に改行が入り、ブロック要素同士縦に並ぶ
・横幅や高さを指定できる
・余白(margin,padding)が指定できる

●インラインブロック要素

〇text-align:center

上下中央揃えでも、インライン要素と同じ考え方で問題ありません。
横並び基準ならvertical-align:center、
親要素基準なら親要素に高さ、display:table-cell、vertical-align:centerを指定。

問題点
・text-align:centerが効かない　
　ブロック要素になっていませんか？
　親要素に対して指定していますか？

・margin: 0 autoが効かない
　インライン要素になっていませんか？
　親要素の幅が小さくなっていませんか？

・position: absoluteができない
親要素はrelativeになっていますか？