가운데 배치

가운데 배치

 

1. 우선 요소를 가운데에 배치하기 위해선 요소와 그 부모요소의 position값이 지정되어 있어야 한다.

  부모요소에 position값을 지정해두지 않았기 때문에 relative값을 추가해주고,

  자식요소에는 부모요소의 position값에 영향을 받도록 하는 absolute값을 추가해줬다.

 

 

2. 수직 중앙에 배치하기 위해선 요소의 top과 bottom값을 입력해야 한다.

    top: 0;

    bottom: 0;

 

마찬가지로, 수평 중앙에 배치하기 위해선 요소의 left, right값을 입력해야 한다.

   left: 0;

   right: 0;

 

 

3. 마지막으로 margin에 auto값을 입력한다. 

auto는 magin(외부 여백)값을 브라우저가 자동으로 계산한다.

    margin: auto;

 

참고로 이때 width값과 height값도 지정되어 있어야 요소가 가운데로 이동한다.

 

 

*정확한 정보가 아닐 수도 있으므로 참고만 해주시길 바랍니다.

*피드백 환영.