[Front] CSS 중앙 잡기

1.  transform 이용

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

top과 left를 50퍼를 주면 정 중앙에 상단 좌측 꼭짓점이 배치하게 됨 

transform: translateX(), transform: translateY()를 통해서 오른쪽(x축으로) 이동, 아랫쪽 (y축으로 이동) 이동할 수 있고,

-(minus)를 통해서 좌측과 상단으로 이동

transform: translate(x,y)는 translateX()와 translateY()를 합친 함수, 이를 통해서 도형의 50퍼만큼 위쪽과 왼쪽으로 당겨 가운데로 맞춤

 

2. margin auto 이용

.parentContainer {
  position: relative;
}
.childContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

top, left, bottom. right을 다 써줘야 전체에 대해 중앙을 잡고, top. bottom만 적으면 수직에 대해, right, left만 적으면 수평에 대해 중앙을 잡음

3. Flexbox 활용

3-1) Flexbox와 justfiy-content, align-tiems

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

 

3-2)  Flexbox와 justfiy-content, 자식 align-self

.parentContainer {
  display: flex;
  justify-content: center;
}
.childContainer {
  align-self: center;
}

 

3-3) flexbox, margin auto

.parentContainer {
  display: flex;
}
.childContainer {
  margin: auto;
}