[css] position으로 가운데 배치, 정렬

css 가운데 정렬

 

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 클릭)