[CSS] center에 놓기

: 이번에는 css를 이용해서 html요소를 정중앙에 놓는 몇가지 방법을 테스트해보고자 한다. 사실 개발자로 일할 때 가장 많이 썼던 기능? 방법?이었던 것 같은데, 한번도 제대로 정리해본적이 없어서(방법은 여러가지인데 그것을 딱 체계화해놓고 쓰진 않았던 것 같다) 이번 기회에 정리해보고자 한다.

css로 중앙에 html요소 놓기의 5가지 방법

---

• 첫번째 방법은 text-align을 이용하는 방법이다. text-align은 말그대로 우리가 텍스트 요소를 중앙 정렬할 때 자주 쓰는 것인데(물론 오른쪽, 왼쪽 정렬도 가능하다), 이 경우에 어떻게 사용하는가 하면, 먼저, 박스를 감싸는 컨테이너로 div태그를 만들어준 다음에, 그 div 태그안에 또하나의 div 태그를 만든다. 대신, 이 때의 div(안쪽의)태그는 display 속성을 inline-block으로 해줘야한다. div는 본래 block이지만, text-align 속성은 block요소에 대해서 작동하지 않기 때문이다. 그런 다음에 inline-block으로 만들어준 태그의 부모 요소에 text-align : center를 해주면, 부모요소는 width를 전부다 차지하는 block요소이기에 그 범위 안에서 inline-block 요소인(width, height가 150px인) 박스형태의 div태그를 text-align 속성의 효과로 가운데 정렬시킨다.
• 두번째 방법은 margin : 0 auto 를 이용하는 방법이다. 먼저 이방법의 핵심은 block요소의 width를 전체 폭보다는 작게해준 다음에(block요소는 기본으로 전체폭을 차지하기에) 해당 block요소에 margin:0 auto를 해주는 것이다. 그러면, margin-left와 margin-right에 auto 값이 먹히게 되고, 그러면 전체 폭과 box의 width를 계산해서 box와 왼쪽끝 그리고 box와 오른쪽끝과의 거리를 동일하게 맞춰서 가운데 정렬을 하게 된다.
• 세번째 방법은 flex를 이용한 방법이다. 부모요소(블록요소로)에 display :flex를 걸어주고, 그 자식요소(역시 블록요소 그러나, width 설정을 전체폭보다는 좁게해준)를 가운데 정렬하기 위해, 역시 부모요소에 flex의 파생속성인 align-items:center;(flex-direction이 row인 경우에는 상하의 정 가운데에 요소를 위치시킨다)를 해주고, justify-content:center;를 통해 상하좌우의 정가운데 위치시킬 수 있게 한다. 여태까지의 방법과는 약간 다르게 이번에는 상하좌우에서 정중앙에 위치시키는 방법을 적용해봤다. 단순 가운데 정렬을 원한다면 justify-content:center;만 해주면 된다.
• 네번째 방법은 position : absolute를 이용한 방법인데, 먼저, position을 absolute로 해주게 되면 부모 요소중에 position이 relative인 요소를 (가장 가까운) 찾아서 그 부모요소를 기준으로 포지셔닝을 하게된다(기준점을 그 부모요소로 잡고 위치를 정하게됨). 그래서 이 경우에는 body 태그에 position:relative로 잡혀있기 때문에, 그리고 그 외에는 position:relative를 걸어준 것이 green_box의 상위요소에는 없기 때문에 body를 기준점으로 위치가 바뀌게 된다. 그래서 left라는 속성을 이용해서 body태그를 기준으로 50% 만큼 움직이게 했다. 하지만, 이렇게해주면 네모난 박스 전체가 50%만큼 왼쪽으로부터 떨어지는 결과가 나오기 때문에 박스 길이의 반만큼을 다시 왼쪽으로 옮겨주는 작업이 필요하다. 그래서 margin-left:-(박스 width/2)를 해줌으로써 마무리했다.
• 마지막 방법은 네번째 방법과 유사하지만, 약간의 차이가 있다. 이역시 단순 가운데 정렬이 아닌 상하좌우의 정중앙 정렬을 해봤는데, position absolute 방법과 유사하면서 약간의 차이가 있다. 위에서는 position absolute를 해주고, left: 50%를 해주고, margin-left 속성으로 마무리를 해줬다면, 이번에는 transform:translate(-50%,0); 속성으로 마무리를 해준다고 생각하면 된다. transform 속성은 다양한 세부 속성으로 나뉘는데 그중에서 translate는 (x축, y축)을 기준으로 요소를 이동시키는 기능을 한다. 따라서 위에서처럼 translate(-50%,0)을 해주면 x축으로 -50%만큼 가게 되므로 네번째 방법에서 width의 1/2을 해준만큼 margin-left를 해준 것과 같은 기능을 다른 속성을 써서 규정해준 것이라고 생각하면 된다. 하지만, 이 경우에는 앞서말했듯이 단순 중앙정렬이 아닌 정중앙 정렬을 시도해본 것이기에 top:50%까지 해줬고 그에 따라 translate도 x축에 더하여 y축까지 -50%를 해준 것이다.

참고 블로그 : 링크