📌margin: auto

Untitled

div의 경우 display: block이므로 한 줄을 다 차지하며, 빈 공간이 margin으로 채워진다.

*수평정렬만 가능하다.

📌text-align: center

box가 block인 경우

box가 block인 경우

box가 inline-block이거나, block이면서 margin-auto인 경우

box가 inline-block이거나, block이면서 margin-auto인 경우

text-align은 margin이 auto인 경우나(display가 block인 경우), display가 block이 아닌 경우 적용된다.

*수평정렬만 가능하다.

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

Untitled

본인 길이의 50%씩 움직인다.

translate(X축, Y축)

*수평, 수직정렬 둘 다 가능하다.

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

Untitled