css vertical center align: line-height사용가능(block안에 inline/inline-block이 있으면 text로 취급되어 설정된 line-height의 지배를 받으므로) 그러나 flex나 position을 더 많이 사용함

center vertially

• using padding
• using line-height
  • line-height: text의 높이, 1이면 text의 1배, 즉 높이 = text높이, 그래서 다음라인과의 간격이없어짐
  • 1.5이면 text의 1.5배니까 위아래로 0.5배만큼의 간격이 생김
  • 폰트마다 text크기가 다르기때문에 px로 지정하면 위험하고 1, 0.9 이렇게 비율로 지정해야함
  • block안에 inline/inline-block이 있으면 그것도 전체적으로 text로 취급되어 block에 설정된 line-height의 지배를 받음, 참고예제) https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height
• using position & transform
• using flexbox

 

 

line-height가 무엇인지 알려면 참고할것https://m.blog.naver.com/weekamp/222040583269

CSS - line-height 총 정리

 

 

 

https://www.w3schools.com/css/css_align.asp