CSS - [ position 이용 가운데 정렬 ]

1. 수직 가운데 정렬

아래와 같이 container 안에 item 클래스를 가진 div 태그를 만든다.

그리고 css로 크기와 색상을 준다.

그러면 아래와 같이 출력된다.

 

요소를 수직 가운데 정렬 할 때에는 정렬할 요소의 높이를 지정하고, position absolute값, top bottom 0 값, 그리고 위 아래 margin을 auto 값을 준다. 정렬할 요소에 position 값을 주었으므로, 부모 요소에도 position 값을 설정해주어야 한다.(static 제외)  부모 요소에는 position relative 값을 준다.

이를 정리해보면 -> item의 position이 absolute 이므로 container를 기준으로 위치가 변경되게 된다. top과 bottom에 0을 주었으니 아래 사진처럼 위 아래 점을 찍고 이를 기준으로 위치를 잡는다. 여기서 위 아래 margin을 auto로 설정했으니 브라우저는 자동으로 요소를 가운데로 몰아준다. 이 때 브라우저에게 요소의 높이를 알려줄 수 있게 height 값을 명시해주어야한다.

top: 0;  bottom: 0;

 

그러면 요소가 수직 가운데 정렬된다!

 

---

2. 수평 가운데 정렬

수직 가운데 정렬과 비슷하다.

정렬할 요소의 너비를 지정하고, position absolute값, left right 0 값, 그리고 좌우 margin을 auto 값을 준다.   부모 요소에는 position relative 값을 준다.

그러면 요소가 수평 가운데 정렬된다.

 

 

 

둘 다 이용해서 가운데 정렬을 할 수도 있다.

수직 / 수평 가운데 정렬

가운데 정렬됨

 

---