직사각형을 사각형으로 채우려 고 시도했습니다.

Question

홈페이지 모양을 만들고 싶지만 분홍색 직사각형을 그릴 수는 없습니다. 당신의 분홍색 배경 웹 페이지의 중간에있을 것입니다 경우에, 당신이 시도 할 수

Answer 1

CSS 위치를 사용하면 큰 혼란의 결과.

는

• 위치 절대
• 톱 50 가운데로 조정하는 지금
• 그냥 다시 50 % 번역 %
• 왼쪽 50 % (50 % 센터링 된 분홍색 배너를 그리려면 , -50 %)

여기서 일어나는 일은 일반적인 수학입니다. 이상적으로는 사각형의 상단 끝을 부모의 50 %로 이동 한 다음 절반 너비와 절반 높이만큼 뒤로 되감으로써 Pink 배너의 질량 중심을 배치하는 것이 이상적입니다.

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>