CSS - fixed position에서 중앙정렬

mementomori·2021년 4월 23일
0

문제상황

  • css 속성에서 position:fixedabsolute와 마찬가지로 해당 element는 전체 css flow에서 벗어나게 된다.
  • 이럴 경우 통상 중앙정렬 방법인 margin:auto나 flex box에서 justify-content:center / align-items:center이 적용되지 않아 문제가 된다.

해결방법

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

- 위와 같이, 먼저 상위 element 기준 좌측에서 우측으로 50% 이동하고(`left:50%`), 다음으로 x축 방향(왼쪽)으로 50% 이동하여 중앙정렬 된다.
profile
21c Carpenter

관심 있을 만한 포스트

0개의 댓글