조은입니다.
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 링크}

장점

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