メインビジュアル（背景画像）に対して画像中央にテキスト表示をする方法

画像配置してテキストを中央におきたかったのでメモ
（すぐ忘れる）

index.html

  <div class="mainvisual"> #メインビジュアルの画像を背景画像に
    <div class="text__content"> #position: absolute;で動かす
      <div class="title">テキストテキスト</div>
    </div>
  </div>

index.css

.mainvisual {
  height: 300px;
  width: 100%;
  background: url(../img/mainvisual.png) no-repeat center center / cover;
  position: relative;
}

.text__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mvの背景画像を設定する。

background: url(../img/mv.png) no-repeat center center / cover;
で一括設定が可能。

position: relative;とposition: absolute;で配置関係を設定。中央に揃えることができる