강디너의 개발 일지

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

CSS

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

강디너 2018. 5. 28. 00:51
728x90
반응형
수평 중앙 정렬

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에 사용했습니다.)





'CSS' 카테고리의 다른 글

Scss 사용한 유동적인 넓이 구하기  (0) 2018.11.15
CSS 선택자  (0) 2018.05.28
커피한잔...
Comments