CSS: 너비와 높이가 100%일 때 가운데 정렬과 세로정렬, 요소 겹치기

화면 중앙에 버튼을 만들고 싶을 때가 있다

정가운데로 정렬할 수 있는 방법들을 생각해보았다
가로정렬과 세로정렬... 결국 난장판이 되었다

display속성을 꼭 사용하지 않아도 된다: position과 z-index 속성의 활용

position은 요소를 겹칠 때 사용하는 속성이다
하지만 어느 때는 옮겼지만 뒤로 가버리는 사태가 발생한다
겹칠 때 보여줄 우선순위를 정해주는 속성이 바로 z-index이다

방법은 다음과 같다
1) position: absolute; //절대 위치로 변환하고
2) top: 50%; left 50%; //퍼센트로 중앙 배치를 실현한다
3) z-index = 1; //우선순위를 1순위로 만든다

*flex, table등 많지만 여기선 다루지 않는다

.first{
    background-image: url('image/blackhole.jpeg');
//background를 cover속성으로 꽉 채우기
	background-size: cover; 
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

#please{
    position:absolute;
    bottom: 50%;
    right: 50%;  
    z-index: 1;
}

세로는 적용되는데 가로가 적용안된다
이 경우는 width와 height가 모두 fix된 상태가 아니기 때문이다.
둘 중 하나를 fix하면 적용된다 하지만 그럴 수 없는 경우가 분명 존재한다
이 때 transform속성을 같이 활용하고 가로 정렬을 먼저 수행한다

transform: translate(x, y); 는 지정 요소를 X축으로 x만큼, Y축으로 y만큼 옮긴다

.first{
    background-image: url('image/blackhole.jpeg');
    background-size: cover; 
    width: 100%;
    height: 100%;
    overflow: hidden;   
}
#please{
    font-size: 30px;
    color: white;
//position은 absolute    
    position: absolute;
//가로 정렬부터 수행한다
    left:50%;
//가로값에 대한 transform을 적용
    transform: translateX(-50%);
//top은 수동으로 조절한다
    top: 47%;
    z-index: 1;
}