h1を中央に揃えるには?

このように、なぜか中央に行きません。なぜでしょうか。

html
1<div class='img' style="position:relative;">
2<img src="https://pbs.twimg.com/media/CSm6rC3U8AEw169.png" alt="背景画像">
3<div class='titledesu' style="position:absolute;top:10%"><h1 class="subtitle" align="center">.QAOとは?<h1></div>
4</div>

css
1img{
2	width:80%;
3	display: block;
4 	margin: 5px auto;
5 	-webkit-filter: blur(5px);
6        -moz-filter: blur(5px);
7        -ms-filter: blur(5px);
8        -o-filter: blur(5px);
9        filter: blur(5px);
10}

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

回答2件

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.imgdiv {
8				width: 100%;
9				text-align: center;
10			}
11			img {
12				width:80%;
13				margin: 5px auto;
14				-webkit-filter: blur(5px);
15				-moz-filter: blur(5px);
16				-ms-filter: blur(5px);
17				-o-filter: blur(5px);
18				filter: blur(5px);
19			}
20			h1 {
21				border: 1px solid #CCC; /* for debug */
22				
23				/* ここ重要！テストに出まーす */
24				position: absolute;
25				top:100px;
26				left:50%;
27				width: 300px;
28				margin-left: -150px;
29				/* ここまで */
30			}
31		</style>
32	</head>
33	<body>
34		<div class='imgdiv'>
35			<img src="//dummyimage.com/200x100/eee/ccc" alt="背景画像">
36			<div class='titledesu'>
37				<h1 class="subtitle">.QAOとは?</h1>
38			</div>
39		</div>
40	</body>
41</html>