何故text-align:centerで真ん中になるのでしょうか？

Question

text-align:centerはインライン要素を真ん中にすると覚えたはずですが、
どうして、<h2 class="page-titile"> We'll Make Your Day</h2>が真ん中になっているのでしょうか？
margin:0 autoでブロック要素は真ん中になると考えていました。。。
どなたか分かりやすくご教授頂けましたら幸いです。

<div class="home-content wrapper">

<h2 class="page-titile"> We'll Make Your Day</h2> <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ</p> <a class="button" href="nemu.html">メニュ〜を見る</a> </div>

css_
.home-content{
text-align: center;
}

全て書くと
@charset"UTF-8";
html{
font-size: 100%
}
body{
line-height: 1.7;
color:#432;
}
a{
text-decoration:none;
}
img{
max-width:100%
}
.logo{
width:240px;
margin-top:14px;
}
.main-nav{
display: flex;
font-size:1.25rem;
text-transform:uppercase;
margin-top:34px;
list-style: none;
}
.main-nav li{
margin-left:36px;
}
.main-nav a{
color:#432;
}
.main-nav a:hover{
color:#0bd
}
.page-header{
display: flex;
justify-content: space-between;
padding:0 4%;
margin:0 auto;
}
.home-content{
text-align: center;

}
こちらでした。

Comments

[maisumakun]

CSSが途切れているように見えますが、全部書いていただけますか？

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[mattn]

タイトルは質問の内容を表す物にしてください。

teratail や stackoverflow の様な質問投稿サイトでは、質問や解答が「資産」になります。タイトルが不正なままですと、他の方が質問者さんと同じ間違いをしてしまったとしてもこの質問/回答を見つけ出す事ができません。

Answer 1

<h2 class="page-titile">自体は真ん中になってません。
その中のTextNode（ようは文字自体）が中央揃えになっているだけです。
h2はブロック要素なので、デフォルトで、横いっぱいに広がります。
その中で、テキストが中央揃えになってます。

Comments

[hamamaruki]

なるほど！！！！
初歩初歩でした。。。
だいぶ混乱していましたが落ちつきました！