Position #중간정렬 하는법

반드시 중간정렬 하는 방법은 아니고 이 원리를 이용해 정렬을 쉽게 하실 수 있어요!
주의해야할 점은 position 값을 주고 싶다면 부모요소에 반드시 position 값이 있어야한다는 점이예요.
그리고 사이즈 값을 반드시 지정해줘야해요, 그렇지 않으면 원하는 위치에 위치시킬 수 없어요.
top, bottom 값을 이용해 수직정렬을 할 수 있고 (margin: auto 0;)
top, bottom, left, right 값으로 중간정렬을 할 수 있어요! (margin: auto;)

CSS

.container {
  width: 400px;
  height: 250px;
  background-color: royalblue;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}