[css] div 가로세로 가운데 정렬

 

block 요소를 가로세로 가운데 정렬하기 위해 absolute로 설정하고 top, left, margin-top, margin-left를 모두 설정했다. 다만 width 또는 height가 변경되면 margin 값도 변경해야하니 좋지 못한 코드다.

<div>
  Hello World
</div>

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

 

 

그래서 top, left, bttom, right 값을 0으로 줌으로써 div의 가용범위를 최대한 늘려준다.

(width, height 값을 주지 않으면 컨텐츠는 stretch되어 꽉차게 보여진다.)

가용 범위를 최대한 늘린다면 margin을 auto로 주면 가운데로 정렬된다.

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

 

 

 

https://www.youtube.com/watch?v=vdvLfkn9wp4