[CSS] 중앙정렬

[ margin : 0 auto Not Working ]

1. float를 썼을 때

2. width 값을 지정하지 않았을 때

3. inline 요소일 때

4. display : inline-block => 요소가 inline 성질을 갖게 되어 => margin:auto 대신 text-align:center

참고 사이트 : https://ssongjjii.tistory.com/21

• fixed position일 때 중앙정렬

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

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

참고 사이트 : https://velog.io/@mementomori/CSS-fixed-position%EC%97%90%EC%84%9C-%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC