조은입니다.
CSS만 사용하여 레이어를 중앙정렬 하는 몇가지 테크닉을 소개한다.

Margin을 이용하는 방법

	
.layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px; /* width와 height의 절반만큼 이동 */
}

결과 : {codepen 링크}

장점

예로부터 자주 쓰인 방법으로 모든 브라우저에서 원활히 지원한다

단점

레이어의 사이즈가 유동인 경우 활용하기가 어렵다.

Transform을 이용하는 방법

	
.layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

결과 : {codepen 링크}

장점

레이어의 사이즈가 유동인 경우에도 쉽게 활용할 수 있다.

단점

IE8 이하에서는 제대로 동작하지 않는다

구버전 안드로이드에서 성능 저하를 야기할 수 있다. (이 경우 Translate3d도 활용할 수 있다)

Position을 이용하는 방법

클리어보스 @이재호님 제보

	
.layer {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 150px;
	height: 150px;
	margin: auto;
}

결과 : {codepen 링크}

장점

레이어의 사이즈가 유동이어도 잘 돌아감.
다른 여러 방법이 있을 거라 생각하는데 더 연구를 해보아야 할 듯 하다.
여러 속성들을 조화롭게 사용하는 것이 웹개발의 기본 아닐까.

카테고리: Research

2개의 댓글

진우 · 2014년 8월 26일 1:09 오후

position을 이용하는 방법의 경우 유동적인 사이즈를 잘 처리하는것 같아보여도 실제로는 뷰포트만큼의 크기만 잡는것으로 보입니다.
background-color가 제대로 출력되지 않습니다. http://codepen.io/arkist/pen/AICer
transform을 이용한 방법의 경우 정상 작동.

Tae Hyoung Kim · 2014년 8월 26일 4:38 오후

3번째 방법 position이용방법 좋긴 한데요 ie7에서는 먹지를 않네요. 소스가 좀 복잡해 지기는 하지만 이 방법으로 하면 ie7에서도 width값 height값 관계없이 중앙정렬이 가능해 보입니다. http://codepen.io/myting/pen/Jiwrn

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다