Pure CSS : Layer-popup Auto center box #2

레이어팝업을 CSS만으로 자동 중앙 정렬하기 #2

이전 포스팅에서 CSS 만으로 가상요소 및 기타 테크닉을 이용하여 레이어 팝업을 중앙정렬 하는 방법에 대해 알아보았습니다.

이번에는 display: table 을 이용하여 중앙정렬시키는 방법에 대해 알아보도록 합니다.

Pure CSS - layer Auto align Box

다음의 코드뷰를 통해 살펴보도록 합니다.

See the Pen layer auto align box by jaeheekim (@jaehee) on CodePen.

css

/**
* ==========================================================+
* Layer-popup Center Box - http://http://webclub.tistory.com
* Copyright © 2016 Jae Hee Kim
* All rights reserved.
* ==========================================================+
*/
.layer-wrap {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:100
}
.layer-wrap .layer-outer {
	display:table;
	width:100%;
	height:100%;
}
.layer-wrap .layer-inner {
	display:table-cell;
	text-align:center; /* 가로 중앙 정렬*/
	vertical-align:middle; /* 세로 중앙 정렬 */
}
.layer-wrap .layer-pop {
	display:inline-block;
}
.layer-wrap .layer-box{
	padding:36px 40px;
	width:320px;
	background-color:#fff;
	border:1px solid #8c8c8c;
	z-index:10;
}
.layer-wrap .btn_area{
	display:block;
	margin-top:22px;
}
.layer-wrap .btn_area .btn {
	display:inline-block;
	min-width:154px;
	height:49px;
	font-size:16px;
	color:#000;
	background-color:#fff;
	border:1px solid #a7afb7;
	border-radius:3px;
	line-height:49px;
	vertical-align:top;
}

/* dimmed 처리는 선택적으로 사용 */
.layer-wrap .dimmed{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background:#000;
	opacity:.3;
	filter:alpha(opacity=30);
	z-index:-1;
}
.dimmed {
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:.3;
	filter:alpha(opacity=30);
	z-index:101; 
}

Related links

1. Pure CSS : Layer-popup Auto center box #1

Jaehee's WebClub