How to center vertical alignment

수직 중앙 정렬하는 방법

display:flex 추천

• 레이아웃 지정 방법 중 하나인 flex 사용시 자식 요소의 정렬을 지정할 수 있다.
• 최소 style
  display: flex;align-items: center;
• column 방향일 경우 style
  display: flex; flex-direction: column; justify-content: center;
• 방향에 상관 없이 정중앙 style
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  or
  display: flex; flex-direction: column; justify-content: center; align-items: center;

display:grid 추천

• 레이아웃 지정 방법 중 하나인 gird 사용시 grid 요소의 정렬을 지정할 수 있다.
• 주요 스타일: justify-content,align-content
  flex와 다르다!
• 최소 필요 style
  display: grid;align-content: center;
• 정중앙 style
  display: grid; justify-content: center; align-content: center;
  or
  display: grid; place-content: center;
  *축약형 : place-content: center; = place-content: center center = justify-content: center; align-content: center;

line-height:부모 요소 height

• line-height: 100px; 처럼 하면 문자열이 높이가 100px이 된다. 100px를 부모 요소의 높이에 맞추면 부모 요소의 수직 중앙에 위치하게 된다.
• 1줄일 경우만 적용 된다. 2줄 이상 부터는 부모를 벗어난다.

vertical-align:???

• 인라인 요소에 대한 수직 정렬
• 기본은 basline 이며 폰트 크기에 상관없이 baseline 에 글자가 위치한다.
• 폰트가 그려지는 위치의 처리 때문에 middle로 해도 원하는 중앙에 안오는 경우가 많다. (계산식 baseline + x-height / 2 )

postion:???

• 높이를 계산해서 위치 시킨다.
  position: absolute; top:calc( ( 100% - 30px ) / 2 )
  (30px 가 자신의 높이.)
• translateY를 사용
  position:absolute; top:50%; transform: translateY(-50%);
  (자신의 높이를 알 필요가 없음)