본문 바로가기

프로그래밍 예제/HTML & CSS 예제

중앙 정렬한 부모의 자식 태그

.phone{background: url(./images/iphone_mockup.png) center no-repeat;
height: 1112px;width:731px;position: absolute;left:50%;top:50%;margin:-556px 0 0 -365px;}

.phone .mainwrap{width: 375px;height:667px;overflow: hidden;position: absolute;left:178px;top:222px;}
.phone .mainwrap .gnb{position: absolute;left: 0;top:0;z-index: 2;}


.phone 은 x, y 축 중앙정렬이면서, 정확한 width, height값과 position: absolute를 갖고 있음.


.mainwrap도 정확한 width, height 값을 가지면서 position: absolute를 갖고 있고, 부모인 .phone 기준으로 실행됨.

.phone 기준으로 x, y축을 px단위로 가짐


따라서 .phone이 중앙정렬이므로, .mainwrap도 중앙정렬됨.


.gnb는 .mainwrap 기준으로 position 속성 실행