リライトしたタイトルは「divのセンタリングと要素の配置の実装方法」です。

Question

このようなものを再作成しようとしていますが、いくつかの問題が発生しています。最初の問題は、「メイン」 div を中央に配置することでした。私はこれを行いました:

リーリー

しかし、「位置: 固定」のため、背景が表示されなくなり、本文に背景を追加しました。

私が遭遇したもう 1 つの問題は、再作成したい Web サイト上に 2 つの p 要素が隣り合っていましたが、次のコードを使用して 2 つの p 要素をまとめることができなかったことです。

リーリー

これは、私の p 要素と HTML 全体は次のようになります:

ああああ

Answer 1

メイン コンテンツを絶対的に配置する代わりに、body 要素に display: flex を適用し、それを 100vh に設定して、ビューポートをカバーすることができます。その後、背景が再び表示されます。

p 要素についても、同様に、display: flex を使用して div でラップし、以下の例のように並べて配置します。

リーリー リーリー

Answer 2

あなたの考え方は理解できますが、残念ながら、それは完全に正しいわけではありません。ご覧のとおり、最初のページのデザインは最初からまったく異なります:

作成者はメイン div を中央に配置せず、64px の本体にパディングを追加し、ラッパー div の幅を 100% に、高さを に設定しました。 100% - 64px * 2。したがって、これを行うには:

リーリー リーリー