2021.11.07_align
flext 박스
중심축에서 정렬하는 것 : justify-content
반대축에서 정렬하는 것 : align-items
flex box가 아닌 상황에서 정렬을 하고자 할 때 margin auto를 쓰면 정렬이 가능하다.
div는 블럭요소 이므로 브라우저 상에서 자동으로 한줄을 자동으로 채워주는 margin을 넣어준다.
=> 한줄을 채워주는 역할을 하므로 수평 상으로만 정렬이 가능하다.
text-align은 블록요소에 먹히지 않는다.
=> margin: auto 속성을 줘서 센터로 만들어야 함 (수평에서만 정렬 가능)
-> 인라인 요소에는 바로 먹힌다.
아무튼 text-align으로는 수직 정렬이 되지 않으니까 다른 방법이 필요하다.
-> transform 사용
화면 끝에서 자기자신의 사이즈 비율 만큼 이동을 한다.

만약 화면 자체로 부터 중간으로 정렬하고자 한다면,
박스의 position을 absolute나 relative로 설정하고 top, left를 각각 50%씩 주면 된다.
** absolue / relative 비교 링크
2021.10.12 - [먹고살기 힘들다] - 2021.10.12
그런데 위의 방식으로 하면 박스의 왼쪽 상단 꼭지점이 화면의 정중앙으로 온다. (의도했던건 상자 자체가 정중앙으로 오는 것인데!!!!)
이럴때 위치를 조정할 수 있도록 하는 것이 바로 transform의 translate임!!
자식박스를 부모박스안에서 정중앙으로 옮기려고 할 땐
그냥 translate(%,%) 써도 가능하다.
텍스트를 중간 정렬하고자 할 때
-> text-align: 수평
-> line-height : 자신이 속한 박스의 높이만큼 부여한다.
- 그런데 이 경우에는 두 문장을 한박스안에서 수직으로 정렬하고자 할 때, 두번째 문장이 박스에서 벗어난다.
(자신이 속한 박스의 높이만큼의 길이 내에서 정렬을 하는 것이기 때문)
link) font matrix 관련 참고자료 (솔직히 지금으로서는 이해가 잘 안간다.)
https://wit.nts-corp.com/2017/09/25/4903