【CSS】主なセンタリング方法

横センタリング

margin: 0 auto;

小要素に設定する

<div class="parent">
    <div class="child"></div>
  </div>

.parent {

  background-color: #e69418;
  height: 400px;
  width: 100%;
}

.child {
  background-color: #61e846;
  height: 100px;
  width: 23%;
  margin: 0 auto;
}

flexの使用

親要素に設定する
justifi-contentsプロパティをcenterにする

<div class="parent-justify">
    <div class="child-justify"></div>
</div>

.parent-justify{
  background-color: #4118e6;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.child-justify{
  background-color: #61e846;
  height: 100px;
  width: 23%;
}

縦センタリング

flexの使用

親要素に設定する
aligin-itemsプロパティをcenterにする

<div class="parent-justify-align">
  <div class="child-justify-align"></div>
</div>

.parent-justify-align{
  background-color: #4118e6;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child-justify-align{
  background-color: #61e846;
  height: 100px;
  width: 23%;
}

文字の横、縦センタリング

flex使わない方法

text-alignプロパティをcenterに（横センタリング）
line-heightプロパティをブロックのheightに合わせる（縦センタリング）
※lign-heightは2行以上とかになると崩れるという欠点があるので注意。

<div class="text-center">
    文字の横、縦センタリング
</div>

.text-center {
  background-color: #c4e618;
  height: 400px;
  width: 100%;
  // display: flex;
  // justify-content: center;
  text-align: center;
  line-height: 400px;
}

flex使う方法

ブロックの横センタリングの方法で文字のあるブロックにそのまま直接指定する。
(文字自体が子要素みたいな扱いなのかな？？)

<div class="text-center-flex">
    文字の横、縦センタリング(flex)
</div>

.text-center-flex{
  background-color: #65b2d6;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}