[CSS] 가운데 정렬하는 방법 모음

🥯 margin: auto

수평정렬만 가능하고, 수직 정렬은 불가능하다.

예를 들어 div는 블록 레벨인데,
margin이 오른쪽으로 기본적용되어있는 것을
양쪽이 동일한 간격으로 자동으로 margin을 맞춰주는 것이기 때문이다.

🥯 text-align: center

text외 다른 요소들을 가운데 정렬할 때도 쓰인다.

div같은 경우는 블록레벨이라 한 줄에 하나씩만 나오기 때문에 마진이 기본적용되어 있어, margin:auto를 적용해야만 가운데 정렬이 된다.

수평정렬만 가능하고, 수직 정렬은 불가능하다.

🥯 translate(50%, 50%)

transform : translate(50%, 50%)

%를 이용했을 떄는 자기자신을 기준으로 계산한다. 즉, 자기자신의 너비와 높이의 50%만큼 이동하는 것이다.
따라서 부모요소의 50%만큼 이동할 수 있도록 지정해야한다.

position: absolute;
top: 50%
left: 50%

(이 상태에서, 아래와 같이 translate으로 이동시켜 가운데 정렬이 가능하다.)

transform: translate(-50%, -50%)

🥯 Text centering

🍞 text-align

🍞 line-height

text-align: center;
line-height: <부모상자 높이>
line-height은 한 줄의 높이를 지정한다.