문제상황

• css 속성에서 position:fixed는 absolute와 마찬가지로 해당 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% 이동하여 중앙정렬 된다.