가운데 정렬 요소
<div>와 같은 블럭 요소를 수평적으로 가운데로 놓기 위해 margin:auto를 쓴다.
요소의 너비를 설정하는 것은 컨테이너의 가장자리를 넘어서 늘어나는 것을 방지한다.
그 요소는 지정된 너비를 차지할 것이고 남은 공간은 동등하게 분할될 것이다.
너비가 지정되지 않거나 100%이면 가운데 정렬은 안된다.
텍스트 가운데 정렬
text-align:center;
이미지 가운데 놓기
왼쪽 오른쪽 margin을 auto로 지정하고 block 요소로 만든다.
왼쪽 오른쪽 정렬 - position
position:absolute;를 써서 요소를 정렬한다.
오른쪽에 요소를 붙이고 싶으면 right:0px; 왼쪽에 요소를 붙이고 싶으면 left:0px;
왼쪽 오른쪽 정렬 - float
position과는 다르게 left, right 값을 지정하지 않고 float의 값만 지정하면 왼쪽, 오른쪽 정렬을 할 수 있다.
만약 자식 요소가 부모 요소보다 높이가 크고 자식 요소에 float이 적용되었다면 자식 요소는 컨테이너의 바깥으로 넘칠 것이다. clearfix를 써서 가상 자식 요소에 float을 clear해줘서 fix한다. 부모 요소에 overflow:auto;를 지정한다.
수직적으로 가운데 정렬 - padding
간단한 해결 방법은 top과 bottom에 padding을 쓰는 것이다.
수직, 수평적으로 가운데 정렬을 하려면 padding과 text-align:center 를 쓴다.
수직적으로 가운데 정렬 - line-height
height와 동일하게 line-height 값을 지정한다.
<div>의 높이와 컨텐츠의 높이를 같게 하여 수직적 가운데 정렬.
수직적으로 가운데 정렬 - positoin & transform
padding과 line-height가 옵션이 아니면, 세번째 해결방법은 transform 속성을 쓰는 것이다.