html - Flexbox 정렬 alignItems center시 내부 박스 크기가 커서 상단단 짤림 => 해결 방법

문제_ pdf 파일 플러그인 수정 중 내부 내용을 가운데 정렬 하는데 문제가 발생:

이미지 크기가 작을 때는 상관 없었는데..

 

다음 처럼 상단이 짤리는 현상이 발생

 

<div id="viewerContainer" tabindex="0" style="display: flex;align-items: center;">

 

 

 

다음 처럼 flexbox에서 가운데 세로 정렬 해결 방법:

 

 

flex-derection: column을 추가

해당 박스::before/after 가상선택자에 margin auto를 삽입

 

 

#viewerContainer {
  display: flex;
  flex-direction: column;         /*  added  */
}

#viewerContainer::before, #viewerContainer::after {
  content: '';
}
#viewerContainer::before {
  margin-top: auto;               /*  added  */
}
#viewerContainer::after {
  margin-bottom: auto;            /*  added  */
}

 

 

이렇게 하면 확대하게되면 최상단으로 고정된 상태에서 확대가 된다.