div 수직정렬 방법좀 질문드립니다.
본문
지금은 방법을 몰라서 padding-top에 calc(100% / 5) 요렇게 하니까
대충 많이 쓰이는 디스플레이 사이즈에서는 원하는대로 나오긴 하는데
이게 가로 사이즈를 5등분한 픽셀사이즈만큼 top에 padding을 주는거라 제대로된
방법은 아닌듯하네요.
모든 브라우저, 모든 기기에서 수직 정가운데 div를 위치시키는 방법좀 부탁드립니다.
답변 2
<div style=" position:absolute; top:50%; left:50%; width:300px; height:300px; background:red; margin:-150px 0 0 -150px;"></div>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { display: table; }
.wrap {
width: 100%;
height: 100%;
display: table-cell;
background-color: #eee;
text-align: center;
vertical-align: middle;
}
.div_in {
width: 10%;
height: 10%;
background-color: #ddd;
text-align: left;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div_in">div in div</div>
<span>span in div</span>
<a href="#">link in div</a>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
