長方形の上に矩形を実現しようとしています

Question

私はこのようなホームページを作成しようとしていますが、ピンク色の矩形を描き、中心に苦労しています。あなたのピンクの背景には、Webページの真ん中に滞在する場合、あなたはこれを試すことができ

Answer 1

CSSの位置を使用すると、大きな混乱が生じました。ちょうど（バック50％-50％を翻訳センターにそれを調整するための絶対

トップ50％

左今50％

中心にピンクのバナー

• 位置を描画するために

  、-50％）

ここでは何が起こっているのは正常な数学です。最初に矩形の上端を親の50％移動し、次に半幅と半分の高さだけ後退させることによってピンクバナーの重心を配置することが理想的です。

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: black; 
 
} 
 

 
.pink { 
 
    background: pink; 
 
    position: absolute; 
 
    height: 75%; 
 
    width: 75%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <div class="pink"> 
 
    </div> 
 
</div>