画像の中心に文を配置させる

前提・実現したいこと

プログラミング学習サイトを利用して、HTML、CSSを勉強しているものです。画像の中心に文（<p>○○○○</p>）を配置する方法がわかりません。同じdivの中に、imgとpで、画像と文を入れたので、そこから文を画像の中心に位置させる方法を教えてください。

該当のソースコード

CSS

試したこと

position:absolute;
top:○○px;

みたいなことはやったのですが、手作業で調整する以外に方法があれば、教えてほしいです。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

こちらの記事がとてもわかりやすく解説されています。中央にするには以下のようにするのが良いですね！

html
1<div class="example">
2  <img src="◯◯.jpg" />
3  <p>SUNSET</p>	
4</div>

css
1.example {
2  position: relative;
3  }
4
5.example p {
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  -ms-transform: translate(-50%,-50%);
10  -webkit-transform: translate(-50%,-50%);
11  transform: translate(-50%,-50%);
12  margin:0;
13  padding:0;
14  /*文字の装飾は省略*/
15  }
16
17.example img {
18  width: 100%;
19  }