Element 를 가로 가운데 정렬시키는 것은 그리 어렵지 않지만 세로 가운데 정렬같은 경우는
가로에 비해서 쉽지 않기에 여러가지 방법이 있다.
처음에는 자바스크립트로 세로 정렬을 하던걸 스크립트로 처리할 수 없는 상황이 오자
이것저것 시도를 해보면서 아래와 같이 여러가지 방법으로 시도하고 사용했다.
- [CSS] Div center 정렬방법
- [CSS] Centering Percentage Width/Height Div Elements (크기가 동적인 Div 센터정렬)
하지만 조금더 근사한 방법을 찾아서 다시 포스팅 한다.
포인트는 아래와 같다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100%;
height: 200px;
border: 1px solid black;
}
#div2 {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
PS.
위의 방법은 일반적인 Desktop Browser 에서 사용하기 힘든부분이 있다.
핵심적인 CSS인 transform 은 CSS3에 나온거다보니 IE9 이상부터 지원이 된다.
링크
하지만 주 타겟이 모바일 이라면 Android 2.x 에서도 지원될 정도로 이미 웻킷 기반에서는
일찍이 지원을 하는 부분이기 때문에 모바일웹을 제작중이라면 강추를 드리고 싶다.
어쩔수 없이 대부분의 PC브라우저에서 지원을 해야 한다면 스크립트로 처리를 하거나
위에 걸린 링크와 같은 작업으로 해야 한다.
댓글
댓글 쓰기