div 및 요소 화면 중앙에 위치시키기

이전 div 화면 중앙 정렬이라는 포스팅을 한 적이있습니다.

하지만 그 방법은 고정 길이가 되어야만 중앙에 위치시킬 수 있었죠.

최근에는 화면의 크기가 유동적이고 변화가 무척 많죠.

그래서 그 코드로는 화면 중앙 정렬이 어려웠습니다.

 

그래서 발견한 것이 translate를 이용하여 처리하는 것이었습니다.

 

.layer{
display: none;
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;

-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

 

레이어 팝업을 사용하기 위해 display:none;를 추가하였고, 화면 최상위로 빼기 위해 z-index를 9999로 했습니다.

 

이 방법이면 어떤 화면에서도 중앙에 정렬이 쉽게 가능합니다.

 

출처 : https://webisfree.com/2016-03-09/[css]-%EC%9A%94%EC%86%8C-%EB%B0%8F-%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%A4%91%EC%95%99-%EC%A0%95%EB%A0%AC%EC%8B%9C%ED%82%A4%EB%8A%94-%EA%B0%80%EC%9E%A5-%EC%89%BD%EA%B3%A0-%EA%B0%84%EB%8B%A8%ED%95%9C-%EB%B0%A9%EB%B2%95