[CSS] div 가운데 정렬하기(가로,세로,중앙 정렬)

[CSS] div 가운데 정렬하기

 

div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다.

텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다.

 

그러면 세로 가운데 정렬은 어떻게 해야할까요?

여러가지 방법을 알려드리겠습니다.

 

---

 

1. line-height와 text-align

line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다.

• line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다.
• text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다.

[결과화면]

[html]

<div>가운데 정렬</div>

 

[CSS]

div{
width: 150px;height: 150px;border: 1px solid #dcdcdc;
line-height: 150px; /* 세로 가운데 정렬 : line-height와 height값을 동일하게 처리합니다.*/
text-align: center /* 텍스트 가운데 정렬 */
}

 

 

 

2. padding

padding을 사용하여 가운데 배치하는 방법입니다.

가장 손쉽게 쓸 수 있는 방법이긴 하지만, 레이아웃을 잡을 때 사용하기에는 적합하지 않습니다.

inline-block일 때에만 padding값을 줬을 때 가로, 세로 가운데 정렬이 되기 때문에,

저는 보통 버튼에 주로 사용합니다.

 

[결과화면]

 

[html]

<div>
가운데정렬
</div>

 

[css]

div{
display: inline-block; /* inline-block일때에만 가운데 정렬 가능 */
padding: 100px;border: 1px solid #dcdcdc;
}

 

 

position을 이용한 방법

부모요소에 position : relative,

자식요소에 position : absolute를 주어 가로, 세로 가운데 배치를 하는 방법에 대해 알려드리겠습니다.

두가지 방법 모두 동일하게 자식요소(absolute)는 left:50% , top:50% 값을 주어 가운데로 위치하게 합니다.

left:50%, top:50% 값만 주게 되면 위의 사진처럼 요소의 왼쪽을 기준으로 정렬이 되는데,

이를 계산해 빼주는 방법입니다.

 

 

*transform을 이용한 방법*

이 방법은 transform의 translate(이동) 속성을 사용하여 처리하는 방법으로 가장 추천드리는 방법입니다.

저도 항상 가로, 세로 가운데 배치되는 레이아웃을 잡을 때, translate를 사용합니다.

부모의 높이나 넓이값이 변경하더라도, 자식은 항상 가운데에 배치되기때문에 유지보수 측면에도 우수합니다.

 

[html]

<div>
	<p>가운데 정렬</p>
</div>

[css]

div{position: relative;/* 부모요소에 relative */
width: 180px;height: 180px;border: 1px solid #dcdcdc}
p {position: absolute;left: 50%;top: 50%;
transform: translate(-50%,-50%) /* 자식요소에 translate 값 주기*/
}