box内の文字要素を縦でも横でも中央に配置したい

今日のコーディングの中で、思の他時間がかかったところをメモです。
以下のように、boxが4つ並んでおり（flexbox）その中のdivの中に文字がきます。こういうバナーだったのですが、文字がなかなか縦に真ん中にならず苦戦しました。でも、すごく詳しく書いていただいているサイトがあり、とても助かりました。いろいろなパターンで真ん中にする方法があるのですが、このページの下の方に解決策をいただきました。
CSSで中央寄せする9つの方法（縦・横にセンタリング）

position: relative;

親box

.oya-box{
position: relative;
padding: 0px;
margin: 0 1px 1px 0;
width: 50%;
height: 54px;
text-align: center;
}

子box

.ko-box{
position: absolute;
top: 50%; left: 50%;/* 上からも横からも50％、つまり真ん中 */
-webkit-transform : translateY(-50%); transform : translateY(-50%);ranslateX(-50%);
/* 要素を移動しまーす */
color: #fff;
display: block;
width: 100%;
text-align: center;
height: auto;
line-heithg:1.2;
}

Macoなりのインプット

①position: relative;でまず「親要素指定」
親要素を基準にして、子要素を移動したいときは、absoluteとrelativeを使う。親要素に「position:relative;」を記述し、子要素に「position:absolute;」を記述。親要素を基準にしてTOPやleftで自在に移動できます。

②position:absolute;で「子要素指定して移動」

③transform: translate　で、確実に移動
・transform ：読み：トランスフォーム
与えられた要素を回転、拡大縮小、傾斜、移動することができる便利なcssプロパティっす。
・translate　：読み：トランスレイト　で、「中央」のずれをなくす
…を（他の場所に）移す，運ぶなどの意味あります。

これで、悩んでいた親要素内の子要素の縦横中央寄せが完了です。
ふ~。