[css] 세로 중앙에 아이템 배치하기

텍스트나 콘텐츠요소들을 세로 중앙정렬 하기에는 꽤나 골치아프다. 

 

나름 내가 해결 했던 방법들 위주로 올려보도록 하겠다. 

 

 

line-height 사용하기

line-heigth 속성은 text가 자신의 박스모델에서 각 텍스트간의 상하간격을 정할 수 있다. line-height에 박스모델 만한 height값을 주게 된 다면 heigth값 /2 씩 텍스트 위 , 아래에 적용되서 해당 텍스트가 세로중앙에 존재하게 된다. 

 

  div{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      text-align: center;
      line-height: 200px;
    }

margin-top 과 position : absolute 속성을 이용한 수직정렬

position : absolute를 하게되면 부모가 static이 아닌 것을 찾게 된다. 현재 코드에서는 containner의 절반 만큼 내려가있는데 이 상황에서 자신의 height의 절반 만큼 음수로 margin-top 에 할당하면 item의 div가 올라가서 딱 절반만큼 되게 된다. 

 

 #containner{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      position: relative;
      box-sizing: border-box;
      
    }
    #item{
      background-color: aqua;
      width: 100px;
      position:absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px;
    }