[CSS] 가운데 정렬 (Center align)

📌 margin: auto

• block level의 요소는 한 줄을 차지하기 때문에 브라우저에서 자동적으로 요소의 오른쪽에 margin을 넣어준다.
• margin: auto를 사용하면 브라우저에서 해당 margin을 좌우에 자동적으로 분배해준다.
• 따라서 수평 정렬만 가능하고, 수직 정렬은 불가하다.

 

📌 text-align: center

• text를 정렬하는 속성이지만, inline요소도 center에 정렬할 수 있다.
• 가운데 정렬하고 싶은 요소의 부모에 적용해야 한다.

 

📌 position & translate

• transform: translate(50%, 50%)는 자기 자신의 width, height에서 50%만큼 이동한다.
• 따라서 가운데 정렬하고 싶은 요소를 부모의 50%만큼 이동한 후 translate로 미세조정 필요하다.

position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

(상황에 따라 relative와 absolute 선택)

 

position & translate

 

📌 text centering

• 수평 정렬은 text-align으로 할 수 있다.
• 수직 정렬은 line-height를 부모의 height 값으로 맞춰주면 가능하다. (text 한 줄의 높이를 부모 요소의 높이와 맞춰주면 자동으로 가운데 정렬이 되기 때문)
• lien-height가 부모 요소의 높이와 같기 때문에 줄 바꿈시 줄간격이 이상할 수 있다. 따라서 한 줄로 작성하는 text에만 사용하는 것이 좋다.