1. position
1-1. postion + transform속성을 이용하여 상하좌우 중앙정렬
position만으로는 중앙정렬을 할 수 없다.
position: absolute;
top: 50%;
left: 50%;
을 했을때 컨텐츠의 시작점이 왼쪽 위 이기 때문에, 꼭지점이 중앙에 놓인다.
그래서 자기 몸의 반 만큼씩 왼쪽 위로 옮겨주어야 한다.
position: absolute; 바로 위 부모 요소가 position: relative; 여야 하고 그렇지 않은 경우 계속 타고 올라가다가 body에 붙어버림. 조심하자.
해결 방법
transform: translate(-50%, -50%);
유의해야할 점: 자기 자신의 margin에 영향을 받을 수 있다.
2. display: flex
display: flex;
justify-content: center;
align-items: center;
중앙정렬 시킬 요소를 부모태그로 감싸줘야 함. 부모에 flex 적용.
내가 가장 즐겨쓰는 방법!
3. margin: auto
3-1. margin: 0 auto;를 이용한 좌우 중앙정렬
2.1 자기 자신을 중앙정렬
2.2 블록요소가 부모의 전체 width를 가지고 있을 경우 원하는 중앙 정렬을 얻을 수 없다.
2.3 자기 자신이 inline-block인 경우에는 사용할 수 없다.
2.4 inline 요소를 display:block으로 바꾼 다음 width를 부모보다 좁게 사용하면 사용할 수 있다.3-2. margin: auto;를 이용해서 상하 중앙정렬이 가능할까?
불가능.
margin-top, margin-bottom: auto 는 값이 0이다.
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. ('margin-top' 또는 'margin-bottom'이 'auto'인 경우, 그들이 실제로 갖는 값은 0이다.
W3C 본문 링크
*예외적으로 부모태그가 display: grid 인 경우에는 margin:auto를 통해 상하 중앙정렬을 할 수 있다. 또한 아래 나오는 3-3의 내용과 같이 정렬할 요소의 position 속성에 특정값을 주면 가능하다.
3-3. position과 margin: auto를 이용한 상하좌우 중앙정렬
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
4. text-align
4-1. text-align을 이용한 좌우 중앙정렬
1. text-align은
1.1 자식인 인라인
1.2 자식인 블록
1.3 자식인 인라인 블록을 중앙정렬한다.
4-2. text-align과 line-height를 이용한 상하좌우 중앙정렬
inline요소인 경우 사용 가능한 방법
line-height를 감싼태그의 height와 똑같이 주기.
한 줄 일때만 사용 가능하다.
5. vertical align 을 통한 중앙정렬
5-1. display: table, table-cell를 이용한 상하좌우 중앙정렬
부모요소
display: table;
자식요소
display: table-cell;
vertical-align: middle;
5-2. 가상요소와 vertical-align을 이용한 상하 중앙정렬
:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
중앙정렬하려는 요소가 inline,inline-block인 경우에만 가능하다.
block이면 한줄 밑으로 내려가서 가상요소와 같은 줄에 배치되지 않기 때문.
