[HTML] div 안의 글자 수직 가운데 정렬하는 법 (flex 활용)

---

💡 div 안의 글자를 세로(수직) 가운데로 정렬하고 싶다면?

웹페이지에서 div 영역 안의 텍스트나 버튼을 세로(수직) 방향으로 가운데 정렬하고 싶을 때가 많아요.
예전에는 padding, line-height, position을 이용했지만,
지금은 CSS flexbox를 사용하면 훨씬 쉽고 깔끔하게 설정할 수 있습니다.

---

🛠️ div 안의 글자 수직 가운데 정렬: 코드 예제와 설명

✅ 기본 예제 (flexbox 사용)

<style>
  .center-box {
    display: flex;
    justify-content: center; /* 가로 가운데 */
    align-items: center;     /* 세로(수직) 가운데 */
    width: 300px;
    height: 150px;
    border: 2px solid #333;
    background-color: #f0f0f0;
  }
</style>

<div class="center-box">
  가운데 정렬된 텍스트
</div>

---

🎯 포인트 설명

• display: flex; 👉 flexbox를 사용하겠다는 선언
• justify-content: center; 👉 가로 방향 가운데 정렬
• align-items: center; 👉 세로 방향 가운데 정렬
• width, height: 박스 크기 설정
• border, background-color: 확인용 스타일 (생략 가능)

---

⚡ 응용 예제: 아이콘 + 텍스트 같이 정렬하기

<div class="center-box">
  <img src="icon.png" alt="아이콘" style="width: 24px; margin-right: 8px;">
  <span>아이콘과 텍스트</span>
</div>

✅ 이미지와 텍스트도 깔끔하게 수직 가운데 정렬됨!

---

🧩 참고: flex-direction 사용 시

설정	결과
flex-direction: row	가로(기본) 방향으로 정렬
flex-direction: column	세로(위→아래) 방향으로 정렬

---

🏁 마무리 요약

문제 상황	해결 방법
div 안 글자가 수직으로 안 맞는다	display: flex; align-items: center; 사용
가로 + 세로 모두 가운데 정렬하고 싶다	justify-content: center; align-items: center; 사용
아이콘 + 텍스트 같이 정렬하고 싶다	flexbox 활용

---

👉 다음 글 예고

[HTML] div 영역을 화면 정중앙에 배치하는 법 (flex + height 100vh 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊