[CSS] 포지션 중앙 정렬

블록 요소 안의 블록 요소를 정중앙에 정렬할 때 적용하는 방법.

 

포지션이 적용되지 않았으며 요소의 값이 정의되어있을 때

 

margin 값을 사용. (부모와 자식 간의 마진 상쇄 현상으로 박스 전체가 밀릴 경우 부모 요소에 overflow: hidden;)

.box1 h3 {
margin: 50px auto;
}
/* 부모 자식 간 마진 상쇄 현상 해결 */
.box1 {
overflow:hidden;
}

---

포지션이 적용 되었을 때

 

top, left의 값을 50%로 주고, 요소의 width, height 값의 반만큼 마진값을 마이너스로 적용. (계산 필요)

    .box2 h3 {
/* h3의 가로 세로값이 정의되었을 때
   요소가 가진 값의 반만큼 마이너스 값 마진으로 처리 */
      top: 50%; left: 50%;
      margin-left: -15vw;
      margin-top: -50px;
    }

margin:auto; 혹은 top, right, bottom, left의 값을 0으로 적용.

    .box3 h3 {
      /* h3의 가로 세로값이 정의되었을 때. */
      top: 0; right: 0; bottom: 0; left: 0;
      margin: auto;
    }

*** top, left 에 50%를 주고 transform: translate(-50%, -50%)를 적용. (요소의 가로 세로 값을 몰라도 가능)

 

position의 위치 값은 요소의 가장 끝이 기준이지만 transform: translate는 요소의 중앙을 기준으로 이동하기 때문에

1번 방법과 같이 요소의 width, height 값의 반을 주는 것과 마찬가지, 대신 계산할 필요 없기 때문에 편함.

    .box4 h3 {
      /*
      현재 가장 많이 사용되는 중앙 정렬 방법
      h3의 가로 세로값이 정의되지 않아도 가능.
      */
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }