【CSS】Vertical-alignとtext-align、margin:autoを極めて上下中央、もう配置に困らないためのまとめ

こんにちは。
ユニトピの人気記事、実は…

【CSS】vertical-alignが効かない時はこれを試す | unitopi – ユニトピ –

なんです。

たしかに配置の問題って、text-alignなのか、marginで左右Autoなのか、なかなかうまく行かないことがありますよね。そこで今回は、様々な状況に応じたサンプルをご用意しました。

Divを中央（左右）に表示したい１

横幅がわからない（決まっていない）場合

.parent{
  text-align: center;
}
.target{
  display: inline-block;
}

Divを中央（左右）に表示したい2

横幅が確定している場合

.parent{
}
.target{
  width: 50px;
  margin: 0 auto;
}

Divを中央（上下）に表示したい

.parent{
  height: 200px;
  display: table-cell;
  vertical-align: middle;
}
.target{
}

Listを横並びにして、中央に表示したい

.parent{
  text-align: center;
}
ul{
  display: inline-block;
}
ul > li{
  float: left;
}

全サンプルの表示例

※ 明示的に色をつけたり、MarginやPaddingの調整等も行っています

See the Pen vEbQRz by Tsukasa Nagata (@nt-uni) on CodePen.0

まとめ

いかがでしたか？
振り返ってみると、その要素がインライン要素なのかブロック要素なのか（インラインブロックやテーブルセルなどもあります）が重要となってきています。というのも、margin:0 auto;はブロック要素かつwidthが決まっているものに効き、text-alignはインライン要素に効くなどの違いがあるためです。

この辺りの違いを理解しておくと、上下左右どこでも配置できるようになるはずです！