CSS를 이용해서 레이어 가운데 위치 시키기

CSS를 이용해서 레이어 가운데 위치 시키기

예제 소스

/*박스크기와 색상만 정의*/
body > div {
    height: 500px;
    width: 500px;
    background-color: blue;
}
body > div > div {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

/*실제 가운데 처리하는 부분*/
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

<div class="wrap">
    <div class="box">가운데</div></div>
</div>