2015년 8월 11일 화요일

모니터 정가운데에 요소 중앙에 띄우기

<div class="test">1<div>


.test{position:absolute; width:300px; height:200px; }

일경우

.test의 left:50%; top:50%; 으로 위치를 옮기고
margin-top:-(height/2)px;
margin-left:-(width/2)px;
하면 해당 요소을 모니터 정가운데에 띄울 수 있음.

위 css을 수정해 보면
.test{position:absolute; width:300px; height:200px; left:50%; top:50%; margin-left:-150px; margin-top:-100px;}
와 같음.

댓글 없음:

댓글 쓰기