postion을 통해서 수직 가운데 위치하기(top:0, bottom:0, margin:auto 0)

: .box1에 top,bottom에 0을 주고 position:absolute;값을 주면 위치상 부모 요소를 파악하지 못하기때문에 container위에 box1이 위치함을 알 수 있음

: .container에 position:relative;추가

 

 .box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

hegith값, top:0, bottom:0, margin: auto(top,botoom) 0;으로 지정하면 수직가운데 위치 할 수 있다

 

---

번외편: 수평가운데 위치

 

left:0, right:0;, marging: auto, width 지정하면 수평가운데로 위치하게 된다