#1. margin: auto로 가운데 정렬이 안되는 경우

Error Log #1.

_margin: auto로 가운데 정렬하기

---

text-align을 center로 설정하거나,
flexbox에 justify-content를 center로 설정함으로써 가운데 정렬을 하던 나에게.
margin: auto로.
center라는 단어를 쓰지 않고.
가운데 정렬을 해내는 것은.
참 특이혔다...특이혔어...

배운 거 써먹겠다고 비장하게 썼다가 아무런 일도 일어나지 않았을 때의 뻘쭘함을 기억하고자. 로그를 남긴다.

---

margin: auto란?

브라우저가 element를 가운데로 정렬하기 위해
left와 right의 margin값을 자동으로 계산하여 설정하는 방식

---

margin: auto가 제대로 작동하기 위한 조건

1. Block-level
   해당 element는 block-level element(div, p, ...)이거나,
   display: block을 통해 block-level이 된 element여야 한다.

2. Width
   해당 element의 width는 반드시 정의되어야 한다.
   이 때, width이 100%가 넘어가면 양 옆에 남을 margin이 없으니 width 설정에 주의한다.

---

수직 가운데 정렬은 가능할까?

가능하다.

정렬하고자 하는 element가 속해있는 부모 element가 flexbox나 grid이면서, height이 해당 element보다 큰 경우에 수직 가운데 정렬도 가능하다.

BUT, 수직 가운데 정렬은
flexbox의 경우,
justify-content: center과 align-items: center을 쓰는 것이,
grid의 경우,
place-items: center을 쓰는 것이 가운데 정렬임을 명확하게 보여주는 방식이면서 좀 더 흔하게 사용되는 방식이다.

---