横並びした2つの画像に文字を重ねる

前提

ウェブの模写コーディングをしています。
（参考ウェブページ：https://code-step.com/demo/html/store1/#）

2つの画像を横並びに配置し、それぞれの画像の中心に文字を重ねたいと思っています。片方の画像にはうまく重ねることができるのですが、もう片方がうまくいきません。
position: absolute; にtopやleftを指定し、配置しています。

実現したいこと

１.position: absolute; にtopやleftを指定し、それぞれの画像の中央に文字を配置したいです。

2.本当は、flexやgridを使って画像の中央に文字を配置したいです。
以前似たような質問をし、この方法を教えていただき勉強したのですが、混乱してしまい実現することができませんでした。。。（試しことを記載すると見づらくなってしまうと思いますので、割愛します）今回のコードの場合だとどのようなコードを書き足せばいいのか教えていただけると、前回のものと比較しながら勉強することができるので、大変嬉しく思います。

該当のソースコード

HTML
1-----省略------
2<main>
3       <section class="wrapper">
4          <h2 class="section-title">A special, long article in a newspaper or magazine</h2>
5          <p class="section-text">
6            テキストテキストテキストテキストテキストテキストテキストテキスト<br>
7            テキストテキストテキストテキストテキスト
8          </p>
9
10          <div class="container">
11             <a href="index.html" class="archive">
12                <img src="./assets/img/magazine-archive.jpg" alt="アーカイブ">
13                <div class="archive-title">
14                    <h3>Archive</h3>
15                    <p>
16                     テキストテキストテキストテキスト<br>
17                     テキストテキストテキスト
18                    </p>
19                </div>
20             </a>
21
22             <a href="index.html" class="news">
23                <img src="./assets/img/magazine-new.jpg" alt="ニュース">
24                <div class="news-title">
25                    <h3>News</h3>
26                    <p>
27                       テキストテキストテキストテキスト<br>
28                       テキストテキストテキスト
29                    </p>
30                </div>
31              </a>
32         
33         </div>
34       </section>
35 </main>

css
1
2------省略-------
3
4/*---------------
5Archive、New
6---------------*/
7
8.container {
9    display: flex;
10    justify-content: space-between;
11    position: relative;
12}
13
14.archive, .news {
15    width: calc(100% / 2 - 20px);
16}
17
18.archive-title, .news-title {
19    font-size: 0.8rem;
20    font-weight: bold;
21    background-color: rgba(0,0,0,0.5);
22    text-align: center;
23    padding: 15px 20px;
24    position: absolute;
25    top: 50%;
26    left: 25%;
27    transform: translate(-50%, -25%);
28} 
29
30.news-title {
31    top: 50%;
32    left: 75%;
33    transform: translate(-50%, -75%);
34}
35
36.archive, .news {
37    color: white;
38}
39

試したこと

このコーディングだと、以下のように右の画像にうまく文字がのりません。

・.news-title {
top: 50%;
right: 25%;
transform: translate(-50%, -25%);
}　を試しましたが、配置が全くズレてしまいます。

top以外をコメントアウトしてみると、topは左側と同じ動きをしているので問題はleft: 75%部分にあると思うのですが、、、

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

position: absolute; で絶対配置する場合、基準となるのはposition: relative;が設定してある直近の祖先要素になります。提示のコードだと.containerになります。

ご希望は、親要素(.archive, .news)の中央に配置するということなので、基準を親要素にするのが道理でしょう。

css
1.container {
2  display: flex;
3  justify-content: space-between;
4}
5
6.archive,
7.news {
8  width: calc(100% / 2 - 20px);
9  position: relative;
10}
11
12.archive-title,
13.news-title {
14  font-size: 0.8rem;
15  font-weight: bold;
16  background-color: rgba(0, 0, 0, 0.5);
17  text-align: center;
18  padding: 15px 20px;
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  transform: translate(-50%, -50%);
23}
24
25.archive,
26.news {
27  color: white;
28}
29
30img {
31    max-width: 100%;
32}

追記

position: absolute; で中央寄せする方法は既に古い手法です。今なら、display: grid;を使うのがシンプルに記述できるのでお勧めです。

css
1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  gap: 40px;
5}
6
7.container > a {
8  display: grid;
9  place-items: center;
10}
11
12.container > a > * {
13  grid-column: 1;
14  grid-row: 1;
15}
16
17.archive-title,
18.news-title {
19  color: white;
20  font-size: 0.8rem;
21  font-weight: bold;
22  background-color: rgba(0, 0, 0, 0.5);
23  text-align: center;
24  padding: 15px 20px;
25}
26
27img {
28    max-width: 100%;
29}