*margin : auto;
기본적으로 box나 div등은 모두 한줄에 한개씩 만들어갈 수 있게끔 남은 공간이 margin으로 채워져 있다. 이는 자식 박스가 부모 박스 안에 있을때도 마찬가지.
이때 margin : auto를 사용하게 되면
부모 박스를 기준으로 양쪽에 공평하게 자동으로 중앙 정렬이 된것을 확인 할 수 있다.
단, margin : auto는 margin 자체가 한줄에 하나씩 들어가는 만큼 수평 정렬만 가능할뿐,
수직 정렬은 불가능하다는점 명심.
*text-align : center
div같은 블록 요소에 대해서는 적용할 수 없고 이는 margin : auto를 사용해야한다.
text나 button등 블럭요소 안에서 그 안에 있는 요소들(인라인 요소) text-align : (원하는 정렬값)을 지정해 text 뿐만 아니라 다른 요소들도 정렬이 가능하다.
text-align 역시 수평 정렬만 가능할뿐 수직 정렬은 불가능하다는 점 명심.
*transform : translate(50%,50%)
자신의 박스 width와 height를 기준으로 x축에서 50%, y축에서 50% 이동시킨다.
이렇게 해서 중앙 정렬이 가능하다.
(추가설명)
예를 들어 부모 박스가 (1000px,1000px)이고, 자식 박스가 (50px,50px)이라고 정의해보자.
.inner3 {
transform: translate(50%, 50%);
}
이처럼 단순히 translate(50%,50%)만 사용하면
자신의 박스 폭과 너비를 기준으로 50%씩 x,y축으로 이동했기 때문에
중앙 정렬이 되어있지않다.
따라서, 아래와 같은 방법을 사용한다.
.inner3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
포지션을 먼저 원하는 부모 박스 안에서 움직일 수 있게끔 만들어준다.(position: absolute 사용)
그리고 위에서 50%, 왼쪽에서 50% 만큼 이동시켜 중앙 지점으로 옮겨준 상태에서,
translate를 (-50%,-50%), 즉 자신의 박스 폭과 너비의 길이만큼 x축의 반대방향으로 50% 이동,
y축의 반대 방향으로 50%이동함으로써 완전한 중앙정렬을 만들 수 있다.
여기서 중요한 점은 translate(@%,@%)가 자신의 박스 폭과 너비 길이만큼 @%움직인다는 것 명심.
*line-height
텍스트의 경우 text-align : center과 line-height : (부모 노드의 폭)px을 지정해 야매로
중앙 정렬이 가능하다.
현재 text에 text-align : center를 사용하여 수평 정렬을 한 상태이다. 모든 text는 font의 크기만큼 지정된 height를 가지고있는데, 그 height의 크기를 line-height : (부모 박스의 height 값)으로 바꾸어 text의 height크기를 부모 박스의 크기와 동일하게 한다.
따라서 text는 부모 박스의 height크기에 맞게 중앙 정렬이 되었기 때문에 자연스레 수직 정렬이 되었다. 하지만 위 사진처러 text가 두줄인 상태로 존재한다면, 각 text의 height값이 부모 박스와 동일하기 때문에 그만큼 공백이 생긴것을 확인 할 수 있다. 따라서 한줄인 텍스트에 대해서만 사용이 가능하다는 점 명심.
