[CSS] 수직 정렬

HTML

<div id="container">
	<div id="target"> <!-- 수직 정렬할 대상 -->
    	내용
    </div>
</div>

 

CSS

<!-- 컨테이너에 높이값이 안먹으면 html, body에 높이값 100%을 준다 -->
#container {width:100%; height:100%; position:relative;}
#target {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

 

https://velog.io/@hsecode/CSS-%EC%88%98%EC%A7%81-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC

[CSS] 수직 가운데 정렬, 수직 중앙 정렬 하기vertical align