div를 가운데 정렬할때...
<div class="position-margin"></div> <div class="position-transform"></div> <div class="flex"> <div></div> </div>
position과 margin
position-margin이라는 div에 position을 absolute로 주고 top, left,right,bottom을 0으로 margin을 auto로 준다.
원래 div는 부모만큼의 너비를 가져 자신의 너비가 있어도 보이지 않는 공간이 존재한다.
따라서 이러한 특징때문에 margin: 0 auto;를 주면 가로 가운데 정렬을 할 수 있는데 position:absolute ; 를 사용하게 되면 이 공간은 사라진다. 해당공간을 전체로 확장하기위해 top, left,right,bottom을 0으로 지정하면 보이지 않는 공간이 가로, 세로를 전부 차지하게되고, 여기서 margin:auto;를 주면 자동으로 바깥 여백이 만들어져 전체적으로 가운데 정렬이 가능해진다.
position과 transform
.position-transform{ position:abolute; left:50%; top:50%; transform: tranlate(-50%, -50%); }
이 방식은 div의 너비와 높이를 모를때 유용한 방식이다.
부모 기준으로 50% 위쪽과 왼쪽에서 떨어진 뒤 자신의 너비, 높이의 50%를 역방향으로 오게하는 방법.
가장 요긴하게 쓰이는 flex
display:flex;를 선언해 flex를 주겠다고 하고, justify-content:center;
align-items:center;
이렇게 설정하게되면 가운데 정렬이 된다.
다만, 부모에게 display flex를 줘야 해결할 수 있고, 지원하지 않는 브라우저가 있다.
그래도 상당히 유용하게 사용된다.
텍스트 요소의 가운데정렬
padding
<div> <span>텍스트</span> </div>
div{
text-align:center;
padding:3em 0;
}부모에 text-align :center; 을 주어 자식 요소들의 텍스트를 가로 가운데정렬하고,
padding을 상하로 주어 세로기준 가운데 정렬을 했다.
이때 padding의 단위가 px이 아니라 em인데, 이것은 현재 엘리먼트 폰트 크기의 배수를 의미해 3em이면 3배를 의미한다.
이것은 푠트 크기가 바뀔때마다 패딩도 변하기 때문에 유동적으로 이루어지게 하는 방법이댜.
line-height
div{height:100px;}
span{line-height:100px;}
높이가 명시적일 경우 텍스트 요소에 동일한 크기의 line-height를 주 해결할 수 있다.
이미지의 가운데정렬
<div> <img src="이미지주소"/> <span>텍스트</span> </div>img{ vertical-align:middle; }
이미지 정렬도 이렇게 할 수 있다.
다른 점은 푠트의 baseline기준으롤 배치되기에 이를 middle로 맞춰야 정렬이 제대로 이루어진다.
