position:absolute;でwidth100%指定したら真ん中に表示されたが、意味がわからない

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

progateでhtml　cssを学んでいます。
要素を重ね合わせることを学んでいたときのことです。画像にpタグのテキストを重ねるときのことです。
親要素にposition:relative;を指定して、子要素にposition:absolute;を指定しました。
そして、top:90pxとしたところまではいいのですが、そのあとleftを指定するのかと思ったら、width100%を指定しろと言われ、その通りにしたら、画像のちょうど真ん中にテキストが表示されました。
leftで左右の位置を指定するなら理解できるのですが、width100％でちょうど真ん中になる原理が理解できません。
なぜそうなるのか、教えてください。

html↓

<div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> </div>

css↓
.lesson-icon {
position: relative;
}

.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}

さらに広い部分のコードをコピペします。
html↓

<div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> </div>

css↓
.lesson-wrapper {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
}

.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}

.heading h2 {
font-weight: normal;
}

.lesson {
float: left;
width: 25%;
}

.lesson-icon {
position: relative;
}

.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
さらに広い部分のコードをコピペしました。ひょっとして、lesson-wrapperのtext-align:center;が関係ありますか？しかし、width１００％というコードを入力すると同時にプレビューでpタグのテキスト（HTML & CSS）がシュッと中央に寄りますので。。。よくわからないです。

（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[maisumakun]

いくつか該当する状況が考えられますので、CSS全体を書いていただけましたら幸いです。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、『画像のちょうど真ん中にテキストが表示』が再現しませんでした。
ご提示いただいていない部分に原因があるかと思います。

[yoshinavi]

＞なぜそうなるのか、教えてください。
→「progate」では、解説や根拠等を、教えてくれないのですか？

[shunsaku87]

すみません、何も教えてくれず、幅を１００%にしろとただ指示されるだけです！

[yoshinavi]

そうなのですね。
プロゲートって、スクールですよね？
それじゃ、この先にも問題が発生してもヒントも解説等も教えてくれないのであれば、何を学べば良いのでしょうね。

この先も、このスクール継続をするかどうかを考える必要がありそうな気がしますね。

[shunsaku87]

返信ありがとうございます。
progateはスクールみたいなものです。
ほんとそうですね。解説必要なところにで、解説がないです。

Answer 1

想像ですが、たぶんtext-align:center;とかが効いてたのではないでしょうか。
width:100%;とすると親要素と同じ横幅になりますから、テキストが中央揃えになってれば、当然に親要素の中央に来ます。
そういうことでは？

質問追記にあわせて追記

lesson-wrapperのtext-align:center;が関係ありますか？

だからそう回答したじゃねえか
ご推察のとおりかと思います。その理由は前述のとおりです。

Comments

[shunsaku87]

ありがとうございました。

Answer 2

width100% は、横幅(width)をいっぱいいっぱい(可能な限度まで(100%))使って表示するという事ですから、結果としては左右のPaddingを除いた範囲に表示されます。
左右のPaddingの幅が同じなら、中央に表示されますよね。

もちろん、left: と right: で左右のPaddingの幅を異なる値にすると、表示は中央からずれます。

Comments

[shunsaku87]

ありがとうございました。