画像に文字を重ねたい

画像の上に重ねて文字を表示したいです
文字は画像の中央に表示したいのですが、ずれてしまいます。。。
長い文字を入力してもはみ出ないように中央に揃えたいです。画像のサイズは510*340です。

最終的には
画像をクリックすると別ページに飛べるようにする
画像を横4縦3の4*3 計12枚を表示
といった形にしたいと考えています。

ilを使って取り組んでいたのですが、どうしても文字の挿入が出来ずに諦めてしまいました。

ご教授いただければ幸いです。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample</title>
6  <link rel="stylesheet" href="sample.css">
7</head>
8<body>
9    <div class="first">
10        <img src ="img.jpeg">
11        <p>文字</p>    
12    </div>
13
14</body>
15</html>

css
1.first {
2    position: relative;
3    width: 500px;
4  }
5  
6  .first img {
7    width: 100%;
8  }
9  
10  .first p {
11    position: absolute;
12    top: 25%;
13    left: 39%;
14    font-size: 60px;
15    color: #ffffff;
16  }

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

回答1件

absoluteを使うなら、

css
1.first {
2    position: relative;
3    width: 500px;
4  }
5
6  .first img {
7    width: 100%;
8  }
9
10  .first p {
11    position: absolute;
12    margin: 0;
13    top: 50%;
14    transform: translatey(-50%);
15    left: 39%;
16    font-size: 60px;
17    color: #ffffff;
18  }