div 안에 이미지 중앙 정렬(가로, 세로) 하기 팁
이미지 중앙정렬 방법이 많지만 여러가지 팁중에 이런 방법도 있습니다.
단, 이 방법은 이미지의 가로세로 높이를 미리 알아야 합니다.
이미지를 absolute 속성으로 주고 top과 left를 50%로 위치지정합니다.
그 후 (이미지크기 / 2) 의 값을 margin 에서 빼주는 방법입니다.
#ads_1
<<코드>>
<style type="text/css">
#box{width:400px;height:400px;border:1px solid #000; position:relative}
#box img{display:block; position:absolute; top:50%; left:50%; margin-left:-97px; margin-top:-130px;}
</style>
<div id="box">
<img src="https://t1.daumcdn.net/cfile/tistory/2626333B52A1437926">
</div>
#ads_2
<<결과>>
#ads_3