css로 가운데로
정렬하는 방법입니다.
수직 가운데 정렬
부모 요소
클래스 이름 {position: relative;}
자식 요소
클래스 이름 {
height: 특정 사이즈 px 지정;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
수평 가운데 정렬
부모 요소
클래스 이름 {position: relative;}
자식 요소
클래스 이름 {
width: 특정 사이즈 px 지정;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
수직, 수평 가운데 정렬
부모 요소
클래스 이름 {position: relative;}
자식 요소
클래스 이름 {
width: 특정 사이즈 px 지정;
height: 특정 사이즈 px 지정;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
화면 보기 (Result 클릭)
반응형
'개발 > Html, Css' 카테고리의 다른 글
[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 (0) | 2021.06.03 |
---|---|
[css] 레이아웃 position 배치 사용법(ft. css 포지셔닝) (0) | 2021.06.01 |
[css] 구글 메터리얼 아이콘 사용 방법(ft. 무료 아이콘 제공 사이트) (0) | 2021.05.30 |
[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용) (0) | 2021.05.27 |
[css] reset css cdn 설치(ft. 기본 css style 세팅) (0) | 2021.05.26 |
댓글