問題
6文字を浮かせて真ん中に配置しよう
別の要素である文字を真ん中に配置するには、その文字の要素を浮かせる必要があります。この要素を浮かせる方法が分かれば、今後配置をコンロトールできるようになるので是非挑戦してみましょう!
HTML/CSSの問題に挑戦しよう！
問題
「文字を浮かせて真ん中に配置しよう」
block要素の中に文字を浮かせて表示させましょう。
浮かせた文字はblock要素のど真ん中に設置するようにしましょう。
見本参考にしてください。
あらかじめエディタに書くコード
<div>
<p>ど真ん中</p>
</div>
¥HTML¥
期待する画面
解答と解説（文字を浮かせて真ん中に配置しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
このように要素の上に要素を置く場合は、position: relative;/position: absolute;を使います。
親要素にrelativeを子要素にabsoluteと覚えましょう。
真ん中にする方法ですが、子要素にabsoluteを付与した状態で top: 50%;left: 50%;transform: translate(-50%, -50%);を付与する事でど真ん中に設置されるようになります。
また、ここで使用しているmargin: 0;はpタグにデフォルト値で設定されているmarginを0にしています。
補足
positionは、ページ上で要素がどのように配置されるかを設定できる重要なプロパティです。多くのWebサイトで使用されています。
設定できる値は、今回登場したふたつ以外にも、fixedやsticky、staticが用意されています。
Webページ上で画面をスクロールしてもずっと追尾してくるヘッダーやバナーを見たことがあるかと思いますが、あれらもこのpositionプロパティを使用して表示されています。
