versuchen, Rechteck über Rechteck zu erreichen CSS

Question

Ich versuche, eine Homepage zu erstellen, die so aussieht, aber ich bemühe mich, das rosa Rechteck zu zeichnen und zu zentrieren. CSS Position unter Verwendung führte zu einem großen Chaos

Answer 1

Wenn Ihr rosa Hintergrund in der Mitte der Webseite bleiben, dann können Sie dies versuchen.

Um die zentrierte rosa Fahne

• Position absolute
• Top 50%
• Linke 50%
• Jetzt ziehen es gerade um 50% übersetzen in die Mitte einzustellen (-50% , -50%)

Was hier passiert ist normale Mathematik. Sie positionieren den Schwerpunkt des Pink-Banners idealerweise, indem Sie zuerst die obere Spitze des Rechtecks ​​um 50% des übergeordneten Elements verschieben und dann um die halbe Breite und halbe Höhe zurückziehen.

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>