강의

멘토링

커뮤니티

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

정지죤님의 프로필 이미지
정지죤

작성한 질문수

인스타그램 클론 - full stack 웹 개발

contents

top :50% 가 왜 가운데로 안가는건가요?

작성

·

438

0

  transformtranslateY(-50%);
까지 해야 수직 정렬 되는 이유가 궁금해요

답변 1

0

범쌤님의 프로필 이미지
범쌤
지식공유자

안녕하세요 정지죤님 kindtiger입니다 :)

우리가 포지션을 주고 top:50%를 줬을때는 정가운데가 아닌 부모크기의 절반만큼 이동하고 그 이후로 등장하는 명령어입니다.

그럼 y축으로 가운데 정렬을 하려면 내 크기의 절반만큼이 다시 위로 올라가야 가운데 정렬이 됩니다.

사용하신  transform: translateY(-50%)는 내 위치를 기준으로 나의 크기의 절반만큼  반대방향(위쪽)으로 이동하겠다는 뜻입니다.

그래서 top: 50% 와 transform: translateY(-50%) 가 함께 있어야 y축으로서 정가운데를 찾을 수 있습니다 :)

더 궁금하신게 있으시면 답글 남겨주세요 ^^

정지죤님의 프로필 이미지
정지죤

작성한 질문수

질문하기