https://www.granfairs.com/blog/staff/centering-by-css
↓これでOK new-igarashi
vertical-align: middle;
内容量よりも高さのあるブロックにおいて、中身を上下中央寄せにしたいときはvertical-alignの出番です。
.outer{ display: table; width: 100%; }
.inner{ display: table-cell;
vertical-align: middle;
text-align:center;}
「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、上下中央寄せにしたいテキストを内包する要素にdisplay: table-cell;を指定します。
innerにtext
例えば、下図のような「横に並んだ」「高さの異なる複数の要素」を中央に揃えたいというシーンで有効な方法です。
↓だとwidthの幅が50％しか取れないから内容量が多ければ↑のほうにする。
花の湯館 新名称 new-name.html
html
<div class=”row justify-content-center header-back “>
<div class=”col-10 col-sm-8 text-center read01″><img src=”image/new-name/item1.png” class=”mx-auto img-fluid” alt=”新名称が決定しました。4月1日より「長八温泉 花の湯館」は「まちなか天然温泉 ゆくりえ」へ
“/></div>
</div>
css
.new-name .header-back {
background-color: #72D3E7;
text-align: center;
vertical-align: middle;
/*要素縦横を中央ぞろえに↓*/
position: relative;
height: 500px;
}
.new-name .read01{
/*要素縦横を中央ぞろえに↓*/
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
transform
ブロック自体の上下左右中央寄せ2つ目、transform。
.outer{
position: relative;
}
.inner{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
これは中央寄せする要素の左上を起点として上から50%（top: 50%;）・左から50%（left: 50%;）の位置に移動させ、要素の大きさの半分ずつを戻す（translate）、という動きをしています。
一部プレフィックス指定が必要なブラウザもありますが、挙動もわかりやすく、幅・高さ指定が必須ではないので汎用的に使いやすい方法といえると思います。
※ 対応ブラウザはCan I useを参照。
Can I use… Support tables for HTML5, CSS3, etc
サンプル – Microsoft Internet Explorer