DIVのサイズが変わっても文字の位置を固定するには？？？

宜しくお願いいたします。
現在、背景画像の上に文字を表示する方法を試しているのですが、うまくいかずアドバイスをお願いできないでしょうか…。

行いたいことは、DIVに背景を指定して、その上に文字を表示しています。
上下左右真ん中表示の文字です。

ただ、画面幅を変えるレスポンシブで対応をしたいのですが、画面幅が変わると上下左右の真ん中位置が崩れてしまうのです。
幾つかこれらの問題のサイトを拝見したのですが、お恥ずかしい話、あまり理解が進まず質問をさせて頂きました。
HTMLとCSSは以下の感じです。

CSS
.hoge {
background: url("./hoge.png") ;
background-size: cover; /*画像は拡大縮小しても全体を表示したいです！*/
}

HTML
<div class="hoge">
このメッセージは拡大縮小しても常に真ん中表示にしたい！！！
</div>

このような感じの場合、どういった定義で中身のメッセセージ部分（このメッセージは拡大縮小しても常に真ん中表示にしたい！！！）を常に拡大縮小しても真ん中に表示することができますでしょうか？

宜しくお願いいたします。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2020/11/23 08:20

子要素を柔軟に並べかえる flexbox を使いましょう

https://developer.mozilla.org/ja/docs/Glossary/F …

.hoge {
width: ... ;
height: ... ;
display:flex; /* 子要素の表示方法として flexbox を指示 */
flex-direction:row; /* 主軸は横向き、交差軸は縦向き */
justify-content:center; /* 主軸は中央寄せ */
align-items:center; /* 交差軸は中央寄せ */
}

この回答へのお礼

有難うございます。
flexで対応したいと思います。

お礼日時：2020/11/23 19:52