[CSS] 가로, 세로, 중앙 정렬

CSS로 스타일링을 하다 보면 가운데 정렬이 헷갈린다.
여러 방법이 다른 것 같은데, 매번 찾기 귀찮아서 정리해본다.

margin 사용하기

div, block요소는 margin:auto를 사용해서 가운데 정렬을 할 수 있다.

text-align 사용하기

text나 inline-block요소는 text-align:center를 사용해서 가운데 정렬을 할 수 있다.

flex 사용하기

요소의 display속성을 flex로 정의하면,
justify-content와 align-content, aling-items를 사용해서 정렬 방식을 설정할 수 있다.

예시

li{
    display: flex;
    align-items: center; /*가로 가운데 정렬*/
}