CSS 수직 중앙, 수평 중앙 정렬

수평 중앙 정렬

1. text-align 을 이용한 가운데 정렬

inline 요소는 text-align 속성을 이용해서 가운데 정렬 가능

2. margin을 이용한 가운데 정렬

넓이가 정해져있는 경우 margin 값을 이용해 가운데 정렬 가능

margin 속성 값이 2개일 경우

margin: (위,아래) (왼쪽,오른쪽);

margin 속성 값이 4개일 경우

margin: (위) (오른쪽) (아래) (왼쪽);

3. Position을 이용한 가운데 정렬

position: absolute 는 position: static 속성을 가지고 있지 않는 부모를 기준을 잡습니다.

그래서 상위 div에 relative 속성값을 부여했습니다.

   

수직 중앙 정렬과 수직, 수평 가운데 정렬

1. Postion을 이용한 수직 정렬

top:50% 로 한 후 수평 정렬한 것 처럼 transform 을 이용하기

top:50% 하고 margin-top : - (height/2) px; (수평+수직 정렬 css에 사용했습니다.)