2022.04.11 Today I Learned📚

📐CSS 중앙정렬

test-align: center

text, inline, inline-block 요소를 가운데 정렬해준다.

margin: 0 auto;

block 요소를 가운데 정렬해준다. 좌우 여백을 반반씩 나누어 콘텐츠가 가운데로 정렬되게 해준다.
💡 inlie, inline-block 요소는 적용되지 않는다.

position, transform

부모요소에 position: relative; 를 설정하고, 가운데 정렬을 해야하는 자식요소에 position: absolute;를 설정한다. (이는 부모요소를 기준으로 위치를 잡는다는 뜻이다)

position: absolute;를 적용한 자식요소에 left: 50%;를 설정하면 부모 요소의 왼쪽으로부터 50% 이동하는 것을 확인할 수 있다. 가운데 정렬을 하려면transform: translateX(-50%);를 설정하면 되는데, 이는 자기 width의 50%를 X축으로 -50% 이동하겠다는 의미이다.

같은 방법으로 상하좌우 가운데 정렬도 가능하다. `left: 50%;` `top: 50%`를 설정하고 transform:translate(-50%, -50%)를 설정한다.