22.04.07_CSS 중앙정렬 뿌시기!

블록요소 자체를 페이지 정중앙에 배치(absolute 사용)

---

 

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

• position:absolute는 부모 엘리먼트 위치를 기준으로 절대적인 위치 값 설정이 가능합니다.
• left와 top을 50%로 설정해 중앙에 정렬. => 이때 해당 요소의 좌측상단이 중앙에 오게 됩니다.
• transform: transition(-50%,-50%)로 해당 요소의 좌측상단이 아닌 정중앙이 페이지 중앙에 오게 만듬. 이때 transition의 값은 (x축, y축)을 의미합니다.

궁금한점

왜 블록요소가 갑자기 인라인요소처럼 변하는 걸까?

해결

absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로

적절한 width를 지정하여야 합니다.

 

블록요소 내부 인라인 컨텐츠를 정중앙에 배치1(flex 사용)

---

flex는 아직 사용법이 더 많다. 가볍게 우선 이 정도로 넘어가자.

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

 

블록요소 내부 인라인 컨텐츠를 정중앙에 배치2 (vertical-align 사용)

---

Flex를 안 쓰고 싶다면 가능하다. 하지만 vertical-align을 사용하면 동일한 레벨에 있는 다른 엘리먼트의 높이에 영향을 받고, 부모 엘리먼트의 높이가 변할 때 따라서 반응하지 않습니다.

.middle > * {
  vertical-align: middle;
}

div {
  text-align: center;
}

 

 

 

블록요소 내부 인라인 컨텐츠를 정중앙에 배치3(line-height사용)

---

아이콘 등에 자주 사용하는 방법. 

부모요소에 text-align을 center로 주고, 자식요소의 line-height를 부모요소의 width나 height만큼 주기.

.fa-solid {
  line-height: 1000px;
}

.middle {
  height: 1000px;
  width: 1000px;
  text-align: center;
}

 

블록요소 자체를 수평중앙에 배치(margin사용)

---

보통 메인 콘텐츠 컨테이너를 수평중앙에 둘 때 사용한다.

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

main {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

 

블록요소 내부 인라인 요소를 수평중앙에 배치(text-align사용)

---

인라인 요소의 수평중앙 배치. 사실 아주 기초적인 내용이라 자세한 설명은 패쓰!

.text {
    text-align: center;
}

 

블록요소 내부 인라인 요소를 수평중앙에 배치(Grid사용)

---

grid 와 place-content를 통해 블록 내부 요소를 수평중앙에 배치합니다.

이때 내부 콘텐츠는 수직방향으로 일렬로 배치됩니다.

따라서 grid-template-columns 속성을 넣어주고 auto의 개수만큼 열이 배치되게 됩니다.

즉, 3개의 auto를 넣으면 내부 아이템이 3개씩 배치되게 됩니다.

.middle {
  display: grid;
  place-content: center;
  grid-template-columns: auto auto auto;
}