[CSS] 반응형 중앙정렬 (transform 이용)

반응형일때 이미지나, 배경의 중앙정렬이 골치아플때 자주 이용하는 기법.

부모형태를 작성하고 .boxcenter 부분을 이용 하면 된다.

 

 

HTML 부분

<div class="container">
   <div class="boxcenter">box</div>
</div>

style 부분

.container { 
   position: relative;
   width:300px;
   height:200px;
   background:red;
   margin:0 auto;
}
.boxcenter{
  position: absolute;
  top:50%;
  left:50%;
  width:30%;
  height:30%;
  background:blue;
  text-align:center;
  transform: translate(-50%, -50%)
}

결과