[CSS3] position & transform 통해서 가운데 정렬 하는 방법

---

알고있으면 좋은 CSS3 Tip✨

---

position & transform 통해서 가운데 정렬 하는 방법

• absolute를 적용하면 다른 엘리먼트에 영향을 주지 않고 독립적으로 움직일 수 있다.

 

(1) 부모 요소(relative)와 자식 요소(absolute) 정의

<style>
.container {
  position: relative;
  width: 100%; 
  height: 400px;
  background-color: #f0f0f0;
}

.centered {
  /* 부모 컨테이너 기준으로 위치 설정 */
  position: absolute; 
  top: 50%;          
  left: 50%;  
   /* 자기 자신의 크기를 기준으로 중심으로 이동 */
  transform: translate(-50%, -50%);
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  text-align: center;
  border-radius: 5px;
}
</style>


<div class="container">
  <div class="centered">가운데 정렬된 텍스트</div>
</div>

• 부모 요소에 relative 정의하고 자식 요소에 absolute 정의한다.
• 만약 부모 요소에 relative가 없다면 자식 요소는 body를 기준으로 위치를 지정한다.
• top: 50%와 left: 50% 통해 부모 엘리먼트의 정중앙으로 이동한다.
• transform: translate(-50%, -50%)을 사용하여 기준점을 자신의 중심으로 이동시켜 완벽하게 가운데에 배치 할 수 있다.