Table of contents
1. 글의 목적
요소를 중앙 정렬할 때,
display: flex; justify-content: center; align-items: center;조합을 자주 사용하고 있는 습관을 발견했다. 이 방법이 잘못된 것은 아니지만, 반드시 필요하지 않은 부분에도 사용하고 있는 것 같은 느낌을 받았다. 이 글의 목적은 요소를 중앙 정렬하는 다양한 방법을 탐구하고, 상황에 맞는 적절한 속성을 사용할 수 있도록 하는 것이다.
2. 수평 중앙 정렬
2-1. text-align : center
텍스트나 링크를 수평 중앙에 정렬하려면, text-align 속성의 값을 center로 주면 된다.
h2 {
text-align: center;
}
2-2. margin : 0 auto
div와 같은 블록 레벨 요소를 중앙 정렬할 때, margin 속성의 값을 0 auto로 주면 된다.
.child {
margin: 0 auto;
}
2-3. display : flex와 justify-content : center
flexbox를 사용해 요소를 수평 중앙에 정렬하려면 부모 요소에 df+jcc를 적용해주면 된다.
.container {
display: flex;
justify-content: center;
}
3. 수직 중앙 정렬
flexbox와 같은 현대적인 CSS 레이아웃 기술을 사용하지 않으면, 수직 중앙 정렬은 수평 중앙 정렬에 비해 조금 더 복잡할 수 있다.
3-1. vertical-align : middle
vertical-align은 인라인 블록 등을 포함한 모든 인라인 요소의 수직 정렬을 위해 사용된다. (table-cell의 수직 정렬은 예외) 요즘은 잘 사용하지 않는다고 한다.
.container {
height: 100px;
}
.container img {
vertical-align: middle;
}
.container span {
font-size: 20px;
vertical-align: middle;
}
3-2. line-height
line-height 속성은 행간의 높이를 조절할 때 주로 사용하는 속성이지만, 폰트와 아이콘 간의 수직 정렬을 위해 사용되기도 한다. 정렬하고자 하는 요소에 height 값과 동일한 값을 line-height에 지정해 주면 된다. 폰트 기반 아이콘은 고유의 박스 영역으로 인해 정확하게 중앙에 정렬되기 어려울 수 있으므로, 시각적 조정을 위해 추가로 line-height를 1px 단위로 조정해 주는 것이 필요할 수 있다.
.component .icon {
width: 50px;
height: 50px;
font-size: 24px;
line-height: 50px;
text-align: center;
}
3-3. position : absolute + top : 50% + transform : translateY(-50%)
부모 요소의 position 속성을 relative로 설정한 후, 자식 요소의 position 속성을 absolute로 설정하고 top을 50%로 지정한다. 그런 다음, transform 속성의 translateY(-50%)를 사용하여 자식 요소를 자신의 높이의 절반만큼 위로 이동시킨다. 이는 margin-top을 -(자식 요소 높이 값의 절반)px로 지정하는 것과 동일한 효과를 가지지만, 요소의 크기가 변할 때마다 수동으로 값을 변경할 필요가 없으므로 더 유연하고 유지보수가 쉽다.
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3-4. display : flex와 align-items : center
flexbox를 사용해 요소를 수직 중앙에 정렬하려면 부모 요소에 df+aic를 적용해주면 된다. 위의 방법과 비교하면 정말 간단하다.
.container {
display: flex;
align-items: center;
}
4. 수직+수평 정중앙 정렬
4-1. position : absolute + top : 50% + left : 50% + transform : translate(-50%, -50%)
중앙에 정렬하려는 요소의 높이와 너비를 정확하게 모를 때, 그리고 flexbox를 사용할 수 없는 상황에서는 해당 방법을 사용할 수 있다. 3-1의 방법에서 수평 값을 지정하는 단계가 추가되어 요소를 정확히 중앙에 정렬할 수 있게 된다.
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%, -50%);
}
4-2. display : flex + justify-content : center + align-items : center
정중앙 정렬을 위해 가장 간단하게 사용할 수 있는 방법 중 하나도 역시 flexbox다. 단순히 수직 및 수평 정렬 기법들을 조합하여 구현된다.
.container {
display: flex;
justify-content: center;
align-items: center;
}
4-3. grid와 place-content
grid를 사용해 간단하게 중앙 정렬도 가능하다. place-content 속성은 그리드 컨테이너 내의 전체 그리드 아이템들을 수평 및 수직 방향으로 정렬할 때 사용된다. 이는 justify-content와 align-content 속성을 단축한 속성이다.
.container {
display: grid;
place-content: center;
}