div 안에 이미지 중앙 정렬(가로, 세로) 하기 팁

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