CSS 요소로 가운데 정렬하는 방법을 정리해 보았다.
1. margin: 0 auto;
div {
width: 800px; /* 너비 지정해야 한다.*/
margin: 0 auto;
}width가 있는 block 요소는 왼쪽 정렬이 되어 한 줄을 차지한다. 나머지 여백은 자동으로 margin으로 채워진다. margin: 0 auto를 주면 margin이 좌우로 분배되어 수평으로 가운데 정렬된다. width를 지정하지 않으면 부모 너비의 100%를 차지하게 되므로 margin: auto는 적용되지 않는다.
2. text-align: center
.container {
text-align: center; /* inline 요소만 적용됨. */
}div {
display: inline-block; /* block 요소를 inline-block으로 */
width: 100px;
height: 100px;
text-align: left; /* div 안에 글자 왼쪽 정렬 */
}text-align: center로 수평 가운데 정렬을 만들 수 있다.- 정렬 대상의
부모 요소에 지정 inline 요소만 적용된다.- 정렬 대상이 여러 개의 block 요소면 text-align: center가 적용되지 않고 수직 정렬 상태를 유지한다.
- 정렬 대상이
block 요소면 inline-block으로 변경한다. - 정렬 대상에 width를 지정하지 않으면 콘텐츠의 너비에 맞추어 너비가 결정된다.
3. line-height
1) 텍스트의 가운데 정렬
div {
width: 200px;
height: 200px;
text-align: center /* 수평 중앙 정렬 */
}span {
background-color: yellow;
display: inline-block /* 크기 지정 가능하게 */
line-height: 200px; /* 수직 중앙 정렬 */
}text-align: center로 수평 가운데 정렬을 만든다. 부모의 height와 자식의 line-height의 값을 동일하게 하면 수직으로 가운데 정렬된다. 아이콘 정렬할 때 종종 사용되는 방법이다.
2) 이미지와 텍스트
<div class='parent'>
<img src="images/icon.png'>
middle
</div>.parent {
width: 300px;
height: 300px;
text-align: center; /* 자식 요소 수평 가운데 정렬*/
line-height: 300px;
}
/* 이미지는 line-height 기준으로 새로 정렬 */
/* 텍스트는 이미지의 상대적으로 가운데 정렬된다. */
/* 이미지나 다른 inline 요소는 inline 방법을 이용해서
텍스트의 세로, 가로 정렬을 한다.*/
.parent img {
vertical-align: middle;
}⚠️ 주의점
단, 이 방법은 여러 줄의 텍스트에는 사용할 수 없다. 한 줄이 아닌 경우 개행된다. 또 line-height의 크기가 부모 요소 보다 크면 공간 밖으로 나가게 된다. 요즘은 환경이 달라져도 레이아웃이 유지되는 반응형으로 만들기 때문에 이 방법은 좋지 않다. 다른 방법으로 padding을 주는 방법이 있다.
헷갈리는 line-height에 대해서 더 알아보자!
line-height는 폰트 사이즈에 leading 영역을 포함한 값이다. 기본 값은 line-height: normal로 폰트 종류마다 사이즈가 조금씩 달라진다. 그래서 명시적으로 line-height: 1, line-height: 1.4 등 현재 폰트 사이즈에 비례한 값을 준다. 만약에 line-height가 400px이라면 폰트 사이즈 16px을 빼고 나머지 공간을 2로 나눈 값이 상하로 들어가서 높이가 설정된다. (384/ 2 = 192)
3-2. padding
.parent {
width: 300px;
text-align: center;
font-size: 30px;
padding: 2em 0; /* em단위를 쓰면 font-size와 비례해서 줄어들고 늘어난다.*/
}정렬 대상의 부모 요소에 padding을 동일하게 준다. line-height 보다 이게 더 맞는 방법이다.
4. position, transform: translate
1) 수직 가운데 정렬
.parent {
position: relative; /* 기준점 */
}
.child {
height: 100px;
width: 100px;
positon: absolute;
top: 50%;
/*요소의 높이의 반(50%) 만큼 위로 이동*/
transform: translateY(-50%);
}2) 수직/수평 가운데 정렬
.parent {
position: relative; /* 기준점 */
}
.child {
positon: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}⚠️ 주의점
- position: absolute는 상위 요소 중에서
position: static이 아닌 요소가 기준점이 된다. 상위 요소 중 아무 곳에도 지정하지 않았다면 body가 기준점이 된다. 기준점으로 두고 싶은 요소에 positon: relative를 지정하면 된다.- top, bottom, left, right로 요소의 위치를 이동시킬 때
좌측 상단의 모서리를 기준으로 움직인다.그래서 생각했던 것과 다르게 가운데 정렬되지 않는다. 이때translate를 이용하면 요소의 위치 조정이 가능하다.
5. display: table, vertical-align
.parent {
display: table;
height: 100px
}
.child {
display: table-cell;
vertical-align: middle;
}여러 줄의 텍스트인 경우
6. Flexbox
.box {
width: 200px;
height: 200px;
display: flex; /* row로 */
justify-content: center; /* 주축(수평) 가운데 정렬 */
align-items: center; /* 교차축(수직) 가운데 정렬 */
}flex 컨테이너에 지정하면 flex 아이템 정렬된다.
7. Grid
div {
display: grid;
place-items: center;
}정리하며
요소의 수직과 수평 정렬을 할 줄 알아야 가운데 정렬을 완성시킬 수 있다. 그렇기 때문에 정렬을 위한 다양한 방법들을 잘 이해하고 알고 있어야 한다. 정리한 가운데 정렬하는 방법들을 적용하고 사용하면서 추가적으로 속성을 살펴보다 보면 CSS 배치에 능숙해질 수 있을 것이다. 역시나 시행착오를 겪어야 내 것이 되고 익숙해진다.
무엇이든 반복과 연습!
백견이 불여일타라는 말이 있다. 👩🏻💻
참고
수평/수직 중앙 정렬 - 이웅모
텍스트 요소 가로, 세로 가운데 정렬
flexbox
CSS 요소 수평/수직 정렬 기법 모음
