css position:absolute 센터 배치

고등학교 태블릿 대여 시스템(프론트엔드)을 구축하면서 html element가 표시되었다가 사라졌다가 반복하는 코드를 구현하면서 밑에 있던 텍스트가 올라왔다 내려왔다 하는 현상이 발생했다.

고정하고 싶은 마음에 element style에 position:absolute를 적용하고 가운데로 배치하기 위해서 다음과 같이 스타일을 추가하였다.

아래 코드를 추가하여

 <div v-show="isHidden" style="position: absolute; left: 50%; transform:translateX(-50%); margin-top: 20px;">
     <img style=" width: 100px;" src="../assets/fingerprint.png" />
</div>

다음과 같이 이미지가 표시되었든 표시가 되지 않았든, 아래 텍스트가 고정되어있는 것을 볼 수 있었다.