[Frontend/CSS] HTML 태그를 가운데 정렬하는 방법

이번 포스팅에서는 HTML 코드에서 특정 요소를 가운데정렬하기 위한 방법에 대해 설명을 드리려고 합니다. 가로로 가운데 정렬을 하는 방법과 세로로 가운데 정렬을 하는 방법에 대해 각각 2가지씩 알아보겠습니다.

 

---

가로로 가운데 정렬 - margin

자기 자신을 감싸고 있는 태그를 기준으로 정렬하고 싶은 경우에 사용합니다. width 값이 정해져 있고, display:block; 속성을 가진 경우에 사용이 가능합니다. margin: 0 auto; 의 auto 속성이 좌우를 동일한 폭으로 맞춰 주기 때문에 가로로 가운데정렬이 가능합니다.

 

See the Pen 가로 가운데정렬 - (1) by Hongjiseong (@hongjiseong) on CodePen.

 

---

가로로 가운데 정렬 - position

positon:relative; 속성을 가진 태그를 기준으로 정렬하고 싶은 경우에 사용합니다.

예) 전체 너비가 100px 이고 블럭 너비가 10px 일 때 50px(전체 너비의 50%) 이동 후 5px(블럭 너비의 50%) 만큼 다시 되돌아가도록 합니다.

 

See the Pen 가로 가운데정렬 - (2) by Hongjiseong (@hongjiseong) on CodePen.

 

---

세로로 가운데 정렬 - margin

보여지는 전체화면을 기준으로 정렬하고 싶은 경우에 사용합니다. height가 70vh 일 때, 위아래가 동일해야 하기 때문에 15vh 15vh 이어야 합니다. 하지만 위에만 15vh를 주면 전체 높이는 100vh 기준이기 때문에 아래는 자동적으로 15vh가 됩니다.

 

See the Pen 세로 가운데정렬 - (1) by Hongjiseong (@hongjiseong) on CodePen.

 

---

세로로 가운데 정렬 - position

positon:relative; 속성을 가진 태그를 기준으로 정렬하고 싶은 경우에 사용합니다.

예) 전체 높이가 100px 이고 블럭 높이가 10px 일 때 50px(전체 높이의 50%) 이동 후 5px(블럭 높이의 50%) 만큼 다시 되돌아가도록 합니다.

 

See the Pen 세로 가운데정렬 - (2) by Hongjiseong (@hongjiseong) on CodePen.

 

---

가로/세로 가운데 정렬 - position

위에서 가로 세로 정렬의 position 방법을 결합한 방법입니다. positon:relative; 속성을 가진 태그를 기준으로 정렬하고 싶은 경우에 사용합니다.

 

See the Pen 가로/세로 가운데정렬 by Hongjiseong (@hongjiseong) on CodePen.