[CSS] 간단한 수직 가운데정렬

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

배치기준이 요소의 왼쪽 위 꼭지점이기 때문에 transform을 통해 요소크기의 -50%만큼 이동시켜주면 수직정렬됨. 

 

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

이거도 된다는데 난 안됨..

 

vertical-align은 inline이나 inline-block에만(text) 적용되므로 div를 이용한 flexbox는 적용안됨.

relative한 정렬이므로 그 줄의 line-height나 같은줄 인라인 요소의 크기에 따라 높낮이가 달라질 수 있음.