수직 가운데 정렬

1. 가운데 정렬

div{
    position: absolute;
    top: 50%;
    left: 50%;        
    transform: translate(-50%, -50%);
}

여러가지 방법으로 해봤지만 이 방법이 제일 편하고 쉽고 예외가 적다.

부모div의 사이즈가 변경되어도 가운데정렬이 된다. 그리고 수평, 수직 가운데정렬을 손쉽게 할 수 있다.

table이고 inline이고 다 필요없이.

2. 가로 가운데 정렬

텍스트 중앙정렬같이 좌우에 여백이 있고 가운데 정렬하는 방법

div{
    position: absolute;
    left: 50%;        
    transform: translate(-50%, 0);
}

3. 세로 가운데 정렬

상하로 여백이 있는 수직 가운데 정렬

div{
    position: absolute;
    top: 50%;        
    transform: translate(0, -50%);
}