Center element

                              
<div id="wrap">
  <div class="container type01">
    <div class="centerBox">
          <span>가운데 정렬</span>
    </div>
  </div>
  <div class="container type02">
    <div class="centerBox">
          <span>가운데 정렬</span>
    </div>
  </div>
  <div class="contBox">
    <div class="container type03">
      <div class="centerBox">
            <span>가운데 정렬</span>
      </div>
    </div>
  </div>
</div>

                              
#wrap{height: 100%;
  .container{
    &.type01{height: 100%; display: flex; align-items: center; justify-content: center;}
    &.type02{display: flex; align-items: center; justify-content: center; height: 100vh;}
    &.type03{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  }
}
.contBox{position: relative; height: 100%;}
.centerBox{padding: 50px; border: 2px solid #000; font-size: 22px; font-family: 'Noto Sans';}

                              
#wrap{
  height: 100%;
}

#wrap .container.type01 {
  height: 100%; 
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center;
}

#wrap .container.type02 {
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center; 
  height: 100vh;
}

#wrap .container.type03 {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
}

.contBox{
  position: relative;
  height: 100%;
}

.centerBox {
    padding: 50px;
    border: 2px solid #000;
    font-size: 22px;
    font-family: 'Noto Sans';
}

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

Flex를 이용한 가운데 정렬

가운데 정렬

Flex + vh를 이용한 가운데 정렬

가운데 정렬

position을 이용한 가운데 정렬

가운데 정렬