인프런 커뮤니티 질문&답변

sticky-elem-canvas (div container)의 위치를 top left 50% 50%으로 한 후에 canvas elemen에 translate3d(-50%,-50%,0)을 하면 센터정렬이 된다고 하셨는데요.

이 원리가 어떻게 되는지 궁금합니다.

정확히말하자면 div 50% 후에 translate3d에서의 -50%값들이 어떤식으로 계산되길래, 가운데로 딱 맞춰지는지 궁금합니다. 

50% 말고, 10%&-10% 등 다른값들은 정확히 센터정렬이 안되더라구요.

-----------------------------------------

+) 마지막 섹션의 canvas는 센터정렬할때 flex로 하셨었죠.

첫번째 섹션의 canvas 센터정렬도 translate3d() + scale() 대신 flex로 센터정렬을 해도 괜찮을까요?

예를들어,

	<div class="sticky-elem sticky-elem-canvas">
			<div class="wrapper">
				<canvas id="video-canvas-0" width="1920" height="1080"></canvas>
			</div>
		</div>

이런식으로 wrapper를 하나 추가하고,

.wrapper{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.sticky-elem-canvas canvas {
    /* position: absolute;
    top: 50%;
    left: 50%; */
}
.sticky-elem-canvas {
    top: 0;
    height: 100%;
}

이런식으로 wrapper에 height와 width를 배정한뒤에 flex로 center로 처리하니 canvas가 가운데로 오긴하더라구요.

이렇게 할경우에 따로 문제가 생길 수 있는게 있을까요?