架空サイトコーディング：つまずき2

スクールでグループワークが始まったり、やる気がおきなかったりで、先延ばしにしていたコーディングを再開しています。

今回のつまずきポイントはpositionの中央寄せ。

＜インタビュー欄＞

上記のように、受講者の写真に名前と経歴のボックスをpositionで配置しようとしましたがうまくいかない。親と子要素の関係がうまく把握できなかったので、違うところを基準として動いてしまう。

解決しようと調べて参考にしました↓

CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法

figureタグを使い、親子関係をしっかりさせることで、配置に成功！
その際、入れ子関係のチートシートサイトを見つけたので参照。
とても分かりやすい！

HTML5 入れ子チートシート | 吉川ウェブ

しかしながら次の問題。
うまいこと中央に配置できない。。
レスポンシブ対応しようと思って単位を%でしているので、どうしたらよいものか。
これも調べて解決↓

position: absolute;を中央寄せする方法 | コトダマウェブ

.interviewer {
border: 1px solid #909090;
padding: 3% 5%;
position: absolute;
bottom: -10%;
right: 0;
left: 0;
margin: auto;
background: rgba(255, 255, 255, 0.88);
width: 90%;
justify-content: space-between;
}

箱の大きさwidthで指定し、さらにpositionのright leftを0とし、marginをautoにすると中央寄せできました！
ふう、なんとか形になりました。

＜余談＞
よく見ると、名前のハコの部分、経歴の方がちょっと下になっています。
flexboxが使えるので、子要素の垂直方向の揃え：align-selfを使用しました。

align-self: flex-end;

さらっと書きましたが、ここにたどり着くのにも試行錯誤。
(positionでやろうしてうまくいかなかったり。)

スクールの同期に相談したら、違うやり方を教えていただきました↓

transformプロパティを使って要素を上下中央に配置する - Qiita

別の箇所で使ってみたけど、これでもできました！transformはアニメーションで使うものと先入観がありましたが、場所の移動にも使えることが学べました。

感想
もっといい方法もあると思いますが、なにより自分で考えて調べて、形になった経験がちょっと自信になります。
実際にコーディングしていくのが、一番勉強になるなとつくづく思う。
ある程度コーディングの知識もついてきてると思うので、パターンやほかの人のやり方を見て、吸収していこうと思います。
先は長そうですが、ひとつひとつ積み重ねていこう。