programming

[Web] div안에 div 가운데 정렬하기

euuuuuz: 2022. 1. 18. 14:51

웹 디자인을 하다보면 가장 많이 쓰는데 또 맨날 까먹는 것 중에 하나가 바로 가운데 정렬이다.

 

무의식적으로 바로 text-align : center 사용하고는

 

아 왜 안되지?

 

그다음은 이제, vertical-align : middle 사용하고는

 

아 왜 안되지?

 

 

무한 반복하다가, 아 맞다....하고는 최후의 수단? 만병통치약으로 사용하는 것이 바로 position을 사용한 가운데 정렬이다.

 

 

 

<html>
<div class="a_box">
   <div class="b_box">
    	안녕?
    </div>
</div>
</html>

<style>
.a_box{
	position: relative;
    }
.b_box{
	position: absolute;
    top: 50%;
    left : 50%;
    transform: translate(-50%, -50%);
}
</style>

 

레알 만병통치약이다.

 

부모 클래스에는 position : relative;

자식 클래스에는 position : absolute; top: 50%; left : 50%; transform: translate(-50%, -50%);