테스트 사이트 - 개발 중인 베타 버전입니다

div 수직정렬 방법좀 질문드립니다. 채택완료

헐크매니아 8년 전 조회 2,439

지금은 방법을 몰라서 padding-top에 calc(100% / 5) 요렇게 하니까

대충 많이 쓰이는 디스플레이 사이즈에서는 원하는대로 나오긴 하는데

이게 가로 사이즈를 5등분한 픽셀사이즈만큼 top에 padding을 주는거라 제대로된

방법은 아닌듯하네요.

모든 브라우저, 모든 기기에서 수직 정가운데 div를 위치시키는 방법좀 부탁드립니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
8년 전

<div style="  position:absolute;  top:50%;  left:50%;  width:300px;  height:300px;  background:red;  margin:-150px 0 0 -150px;"></div> 




참고 : http://nuli.navercorp.com/sharing/blog/post/1132794">http://nuli.navercorp.com/sharing/blog/post/1132794

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

8년 전

</p><p><!DOCTYPE html></p><p><html></p><p>    <head></p><p>        <style type="text/css"></p><p>        * { margin: 0; padding: 0; }</p><p>        html, body { width: 100%; height: 100%; }</p><p>        body { display: table; }</p><p>        .wrap {</p><p>            width: 100%;</p><p>            height: 100%;</p><p>            display: table-cell;</p><p>            background-color: #eee;</p><p>            text-align: center;</p><p>            vertical-align: middle;</p><p>        }</p><p>        .div_in {</p><p>            width: 10%;</p><p>            height: 10%;</p><p>            background-color: #ddd;</p><p>            text-align: left;</p><p>            margin: auto;</p><p>        }</p><p>        </style></p><p>    </head></p><p>    <body></p><p>        <div class="wrap"></p><p>            <div class="div_in">div in div</div></p><p>            <span>span in div</span></p><p>            <a href="#">link in div</a></p><p>        </div></p><p>    </body></p><p></html></p><p><span style="font-size: 11pt;">

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인