[HTML] div 영역을 화면 정중앙에 배치하는 법 (flex + height 100vh 활용)

---

💡 div 박스를 화면의 딱 가운데(가로 + 세로 중앙)에 위치시키고 싶다면?

웹 페이지를 만들다 보면 어떤 요소를 화면의 정확한 중앙에 배치하고 싶을 때가 많아요.
예전에는 position: absolute, top: 50%, transform: translate(-50%, -50%) 같은 방법을 썼지만,
요즘은 CSS flexbox와 height: 100vh 조합으로 더 쉽게 구현할 수 있습니다.

---

🛠️ 화면 정중앙 배치: 코드 예제와 설명

✅ 기본 예제 (flexbox + height 100vh)

<style>
  .center-wrapper {
    display: flex;
    justify-content: center;       /* 가로 가운데 */
    align-items: center;           /* 세로 가운데 */
    height: 100vh;                 /* 뷰포트 높이 100% */
    background-color: #f9f9f9;     /* 확인용 배경 (생략 가능) */
  }

  .center-box {
    width: 300px;
    height: 150px;
    border: 2px solid #333;
    background-color: #fff;
    text-align: center;
    line-height: 150px;            /* (선택) 텍스트 수직 가운데 정렬 */
  }
</style>

<div class="center-wrapper">
  <div class="center-box">화면 정중앙 박스</div>
</div>

---

🎯 포인트 설명

• height: 100vh; 👉 화면 전체 높이 사용 (Viewport Height)
• display: flex; justify-content: center; align-items: center; 👉 중앙 배치 핵심
• line-height는 텍스트 1줄일 때만 사용, 여러 줄 텍스트에는 flex 사용 추천

---

⚡ 여러 줄 텍스트도 정중앙에 배치하고 싶다면?

<style>
  .center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 2px solid #333;
    background-color: #fff;
  }
</style>

<div class="center-wrapper">
  <div class="center-box">
    <p>여러 줄<br>텍스트도<br>정중앙에!</p>
  </div>
</div>

✅ line-height 대신 flex 사용으로 여러 줄도 가운데!

---

🧩 추가 참고: min-height: 100vh;와 차이

속성	의미
height: 100vh	화면 높이에 정확하게 맞춤
min-height: 100vh	최소 화면 높이 확보, 더 길어질 수 있음

---

🏁 마무리 요약

목표	방법
화면 정중앙에 박스 배치	flex + height: 100vh 활용
여러 줄 텍스트도 가운데 맞추기	display: flex; align-items: center; justify-content: center; 사용
화면보다 컨텐츠가 많을 때	min-height: 100vh 고려

---

👉 다음 글 예고

[HTML] div 안의 이미지 비율 유지하며 꽉 채우는 방법 (object-fit 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊