レスポンシブでヘッダー画像に文字を縦横中央に重ねたい

Webサイトのヘッダーメイン画像にキャッチフレーズを重ねたいと考えています。

・画像に対し、縦横中央に文字を重ねたい

・キャッチフレーズは２行

・画面横幅を小さくしても、ずっと画像に対して文字が縦横中央に記載されるようにしたい。

・画像はブラウザに対し横幅いっぱい（余白なし）

現在はキャッチフレーズを

position: absolute;
bottom: 40%;
left: 20%;
text-align: center;

で設定し、ブレイクポイントごとにbottomとleftの数値を変更しているのですが、
そうではなくて、常に（どんな横幅でも）縦横中央に文字を重ねたいのです。
（ブレイクポイントで変更するのはフォントサイズのみにしたい）

方法をご存知の方、教えてください。よろしくお願いします。

サンプル
http://blog.mismithportfolio.com/web/20151027cssimageplace

<div class="main">
<img src="img/header.png" class="header">
<p class="text">テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

.header	{position: relative}

.text	{
	position: absolute;
	bottom: 40%;
	left: 20%;
	text-align: center}

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

回答1件

ベストアンサー

CSS
1.main {
2	position: relative;
3}
4.header {
5	width: 100%;
6}
7.text {
8	margin: 0;
9	position: absolute;
10	left: 50%;
11	top: 50%;
12	-webkit-transform: translate(-50%, -50%);
13	-ms-transform: translate(-50%, -50%);
14	transform: translate(-50%, -50%);
15}
16```**動くサンプル：**[https://jsfiddle.net/gg8xy2rp/](https://jsfiddle.net/gg8xy2rp/)