css 가운데 정렬 transform

CSS로 가운데 정렬을 하는 방법은 여러가지가 있음.

 

HTML CODE

<div class="center_wrap">
  <div class="center">가운데 정렬</div>
</div>

 

1. position absolute와 transform을 이용한 방법

코드가 간단하긴 하지만 특정 브라우저에서 컨텐츠가 흐려져 보이는 경우가 있음.

.center_wrap{ 
    position: relative;
    width: 100%;
    height: 100%;
}
.center{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
}

 

2. position absolute와 margin을 이용한 방법

컨텐츠의 width, height 값이 정해져 있을때 가능한 방법. width, height 의 절반px 만큼 마이너스 값으로 줘서 맞춤.

.center_wrap{ 
    position: relative;
    width: 100%;
    height: 100%;
}
.center{ 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -160px;
    width: 320px;
    height: 100px;
}

 

3. flex를 이용하는 방법

간단해서 요즘 가장 많이 씀.

.center_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
}