CSS, 가로 가운데 정렬! 세로 가운데 정렬! 하는 방법!

 

1. 세로 방향 기준! 가운데 정렬 하는 방법!

 

원래! align-content는 display: flex일 때만 동작하는 속성으로 알려져 있습니다!

하지만 2022년 CSS 업데이트 이후,align-content는 단독으로도 사용 가능해졌습니다.

 

[ 예시 ]

div {
  height: 200px;
  align-content: center;
}

 

 

세로정렬 >> align-content: center;

• 여러 줄(여러 라인)로 배치된 요소들을 세로 방향 묶음으로 정렬
• 원래는 flex 전용이었지만 2022년부터 block/grid에서도 단독 사용 가능

 

 

 

2. 가로 방향 기준! 가운데 정렬 하는 방법!

 

div {
  text-align: center; /* 글자, 인라인 요소 가로 중앙 */
}

가로정렬 >> text-align: center;

• 텍스트, 인라인 요소, 인라인 블록 요소를 가로로 가운데 정렬하는 속성
• 인라인 요소인지 블록 요소인지와 상관 없이 적용 가능! 단, 자식(정렬 대상)이 인라인 계열일 때만 효과 있음

V

V

V

 

[ 설명 - 사용불가 ]

<div class="parent" style="text-align:center">
  <div class="child">나는 블록</div>
</div>

 

블록 요소인 div는 text-align으로 가운데 정렬 안 됨

 

 

[ 설명 - 사용가능 ]

<div class="parent" style="text-align:center">
  <span class="child">나는 인라인</span>
</div>

 

인라인 요소인 span은 text-align:center로 가운데 정렬됨

---

 

그럼 블록 요소를 가운데로 보내는 방법은?

 

1. margin: 0 auto;

.child {
  width: 200px;
  margin: 0 auto;
}

 

 

2. parent를 flex로 만들기

.parent {
  display: flex;
  justify-content: center;
}

 

 

3. parent를 grid로 만들기

.parent {
  display: grid;
  place-items: center;
}

 

 

총 정리!!!!!

• text-align:center는 인라인 요소(텍스트, span, img, inline-block 등)만 가로 중앙 정렬된다.
• 블록 요소(div, section 등)는 한 줄 전체를 차지하기 때문에text-align으로는 정렬되지 않는다.
• 블록 요소를 가운데로 보내려면margin: 0 auto; 또는 flex/grid 정렬을 사용해야 한다.