swiperを使った画面中央に文字を配置するにはどうしたら良いですか？

Question

画像のスライダーとして「swiper」を使っています

画像の切り替わりと同時に切り替わらないように、つまり画像は切り替わるけれども文字は切り替わらず常に画像の中央に配置したいのですがどうしたら実現できるでしょうか？
position:relativeとabsoluteを使って色々やってみたのですが埒が明きません
「swiper」は画像のURL以外デフォルトのままです

詳しい方がいらっしゃりましたら御教示下さいm(__)m

	<div class="swiper-container">
		<!-- メイン表示部分 -->
		<div class="swiper-wrapper">
                      <div class"header">文字文字文字文字</div>
			<!-- 各スライド -->
			<div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
			<div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
			<div class="swiper-slide"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-pagination"></div>
	</div>

.swiper-wrapper{
	position:relative;
}

.header{
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform: translateX(-50%);
	transform: translateY(-50%);
	color:black;
	z-index:2;
	background-color:white;
}

Comments

[x_x]

いろいろの部分は書けませんか？

[tanakashouzoux]

ご指摘ありがとうございます。
編集させて頂きましたm(__)m

Answer 1

.swiper-wrapper 内に置くと Swiper 制御下に入り表示位置が変わってしまうので外に出しましょう。
.swiper-container には最初から position: relative; があるのでここにスタイルの追加はいらないです。

<div class="swiper-container">
    <!-- =を忘れずに -->
    <div class="header">文字文字文字文字</div>

Comments

[tanakashouzoux]

わざわざご返信ありがとうございます！
さらにはミスの指摘までありがとうございますm(__)m
一人でプログラミング勉強しているのでご指摘ありがたいです！

<div class="swiper-container">
の直下に
<div class="header">文字文字文字文字</div>
を書くだけでcss等は変えなくても大丈夫でしょうか？

[x_x]

細かいことを言えば .header のほうは transformが上書きされてしまっているので
transform: translate(-50%, -50%);
として、width / height は不要でしょう。

[uemaSR]

横から失礼します。
cssですが、
transformが2回書かれてるので、最初のが上書きされてるかもしれないです。
まとめて書く場合はこうです。
transform: translate(-50%, -50%);

[tanakashouzoux]

何度もありがとうございます！
「.header のほうは transformが上書きされてしまっている」とはどういうことなのでしょうか？
御教示頂ければありがたいです

御教示頂いた通りwidth / heightは削除してtransform: translate(-50%, -50%);を追加してみたのですが画面の中央ら辺には来たのですが若干右にずれてしまっています
何か対処法はございますでしょうか？
使っているブラウザはchromeです

[tanakashouzoux]

uemaSRさんコメントありがとうございます！
早速消させて頂きました！

[x_x]

ここまでの修正分を入れるとずれている感じはしないのですが、Swiper 外の影響もあるかと思うのでデベロッパーツールでそれぞれどこに配置されているか、修正分が反映されているか確認してみてはどうでしょうか

[tanakashouzoux]

確認したのですがやっぱりずれてしまいます????
デベロッパーツールでも確認してみたのですがheaderのブロックの左端がド真ん中に来ていて、文字がそこから始まっているのでずれた感じになっているようです。

文章の中央がド真ん中に来て欲しいのですが・・・

[x_x]

修正分が反映されているか確認しましたか？
つまり transform: translate(-50%, -50%) ではないのではないかと思います

[tanakashouzoux]

transform: translate(-50%, -50%);
を加えてみたのですがこれは加えなくていいという事でしょうか？
頭が悪くてすいませんm(__)m

[x_x]

ツールで<div class="header">を選んだ状態のスクリーンショットを載せてもらってもいいですか？

[tanakashouzoux]

ありがとうございます！
画像貼らせて頂きました！
「選んだ状態のスクリーンショット」はどうやって撮るのでしょうか？????
すいませんがご教示頂けると助かりますm(__)m

[x_x]

ツールの Elements タブから選んで、その時の Styles の様子をとってください

[tanakashouzoux]

ありがとうございます！
新しく画像を貼ったのですがこれでよろしいでしょうか？????

[x_x]

やはり、
transform: translate(-50%, -50%);
ではなく、
transform: translateY(-50%);
となっていますね。
CSSの修正が反映されていないので確認してください。

[tanakashouzoux]

あーーー！！！
transform: translateX(-50%);
transform: translateY(-50%);
を消して
transform: translate(-50%, -50%);
にしたら上手くいきました！！！！
本当にありがとうございますm(__)m

ちなみに
「transform: translateX(-50%);
transform: translateY(-50%);」
と
「transform: translate(-50%, -50%);」
は違うものなのでしょうか？
私は全く同じもので書き方が違うだけなのか思っていました・・・

[x_x]

uemaSRさんも指摘していますが、前者は同じ transform というプロパティが二度出てくるので前のが無効になっています。

[tanakashouzoux]

ご丁寧にありがとうございますm(__)m

ということは
transform: translateX(-50%);
transform: translateY(-50%);
という書き方は出来ないのでしょうか？

私は
「transform: translateX(-50%);
transform: translateY(-50%);」
が
「transform: translate(-50%, -50%);」を分けて書いたものだと思っていたのですがXとYで分けて書くことは間違いなのでしょうか？

[tanakashouzoux]

正しくは
「transform: translateY(-50%) translateX(-50%);」
または
「transform: translate(-50%, -50%);」
という事なのでしょうか？

[x_x]

同じプロパティを二度書いたら後者のみ有効と覚えてください
後半はその通りです

[tanakashouzoux]

長々とご丁寧にありがとうございます！
お陰様で勉強が続けられそうです！
本当にありがとうございましたm(__)m