position: absoluteがある要素の画像を左右中央寄せにしたい

Question

前提・実現したいこと

position: absolute;に指定した背景画像を左右中央に寄せて文字も画像の真ん中に寄せたい。

■■な機能を実装中に以下のエラーメッセージが発生しました。
下記のようにコードを書きましたが左に寄って左右中央になりません。
text2の文字もきちんと要素ごとに順々縦に並ばず、ブラウザの上のほうにきてしまいます。

画像のサイズはwidth:1100px height:200pxです。

wordpressのTwenty Nineteenで作っています。（ローカルサーバーでやっています）

該当のソースコード

＜html＞

<header>
</header>
<section id="container">
	
<article class="text">
		<div class="image">
	<p>テストテストテストテストテストテストテストテストテストテスト1</p>
	</div>
	</article>

<article class="text2">
		<div class="image">
	<p>テストテストテストテストテストテストテストテストテストテスト2</p>
	</div>
	</article>
</section>

＜CSS＞

header {
width:1100px;
padding-top:500px;
background:red;
}

#container {
		width:1100px;
	}
	
	.text {
		position: relative;
		color:blue;
	}
	
	.image {
		position: absolute;
		min-width:1100px;
		background-image:url("image.jpg");
		top:300px;
		padding-top:200px;
		left: 50%;
  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform: translatex(-50%);
	}
	
	.image p {
		text-align:center;
	}

.text2 {
		text-align:center;
	}

試したこと

こちらでも中央寄せになるというので試してみましたが下の方に空白がいっぱいあいて画像が下にいってしまい中央にはなりませんでした。

margin    : 50vh auto 0;
	transform : translateY(-50%);

Comments

[Lhankor_Mhy]

左右中央というのは、何に対しての中央ですか？
#container に対してということでしたら、ご提示のコードで問題なく実現しているようです。
ビューポートに対してでしょうか？

[退会済みユーザー]

そうです！containerです！ということは間違ってないんですね。でもブラウザで見てみると中央によっておらず左端によってしまっています。

[退会済みユーザー]

min-width:1100px;をwidth:1100px;にしてみましたが変わりませんでした。

[Lhankor_Mhy]

#container 自体が左に寄っているので、その中で中央に揃えてみても、ブラウザ全体から見ると中央ではないと思います。

[退会済みユーザー]

ああ！なるほど！やってみます。

[退会済みユーザー]

おっしゃるとおりにコンテナを中央にしたらうまくいきました。
ケアレスミスでした。

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

コンテナを中央によせることで背景画像も中央によりました。