CSS: Absolute center element answer re: 왜 translateY(-50%)가 맨 위에 있는 요소를 중앙에 배치해야 합니까: 50%?

TLDR:
position:absolute 요소를 부모 내부에 배치하는 방법을 알아보세요.

소개

아마도 "rad CSS flexbox를 사용하지 않는 이유는 무엇입니까?"라고 생각해야 합니다. 그리고 당신 말이 맞아요! 거의 모든 경우display: flex가 작동하여 불필요한 두통에서 벗어날 수 있습니다.

그러나 조만간 시스템을 해킹하고 position: absolute를 사용하여 불량 요소를 배치해야 합니다. 그러면 조금 까다롭다는 것을 알게 될 것입니다.

당신을 구하러 왔습니다, 친구‍!

👎 잘못된 방법

좋아하는 코드 편집기(VS는 내 것임)를 열면 쇼가 시작됩니다!

.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
}

당신은 최종 결과를 볼 때까지 당신의 굉장함에 대해 너무 흥분됩니다!


아니! 젠장! 그 일은 결코 중앙에 있지 않습니다!

그리고 처음에 코딩을 시작한 이유가 궁금할 때입니다. 하지만 답답함에 호기심이 생기면서 “왜 이런 일이 일어나는 거지?”라는 의문이 들기 시작한다.

👍 올바른 방법

분명히 당신과 나(내가 처음 센터링 문제를 접했을 때)는 중요한 세부 사항을 놓치고 있습니다!

2D 평면을 고려할 때 좌표계의 중심점(0,0)은 요소의 중심이 아닙니다. 왼쪽 상단 코너입니다! 이제 항목이 처음에 중앙에서 멀리 보이는 이유가 더 명확해졌습니다.

하지만 어떻게 바꿀 수 있습니까? 간단하고 적절한 방법을 보여 드리겠습니다.



핵심은 요소의 X축(가로) 너비 절반과 Y축(세로) 요소 높이의 절반을 빼는 것입니다. 그런 다음 요소는 부모 내부의 절대 중앙에 위치해야 합니다.

.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

translate() 함수 덕분에 CSS 구현이 훨씬 쉬워졌습니다.

The translate() function repositions an element in the horizontal and/or vertical directions.

따라서 translate(-50%, -50%)를 사용하여 21자만 사용하여 원하지 않는 오프셋을 제거했습니다. 놀라운!!! 👏

결론

Flexbox 모듈이 옵션이 아닌 경우 position 속성을 사용하는 것을 두려워해서는 안 됩니다.

솔직히 말해서 내 요소를 중앙에 배치하는 훨씬 더 어색한 방법을 배우고 싶습니다. 아래 댓글 섹션에서 방법을 알려주세요 👇