아주 원초적으로 중요하고 생각보다 복잡한..

<div>

margin auto

• position

• 부모의 너비 길이에 종속받기 싫을 때.

  .position-margin {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
   	bottom: 0;
    margin: auto;
  }
  

  해당 공간을 전체로 확장하기 위해서 left , right , top , bottom 을 각각 0으로 설정해야 한다.

position과 transform

.position-transform {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

div의 너비와 높이를 모를 때 유용한 기법

1. 부모 기준으로 50% 위/왼쪽에서 떨어진다
2. 자신의 너비/높이의 50%를 다시 역방향으로 오게 한다.

flex

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

제일 유용한 방법이다.

문제점은 부모의 max 높이 html, body { height: 100%;} 해줘야.. ㄹㅇ 중앙 맞출 수 있다..

텍스트

div { text-align: center }