초보자를 위한 CSS로 텍스트 가운데 정렬하기

CSS로 텍스트를 가운데 정렬하는 방법을 알려드립니다!
이 글에서는 가로 가운데 정렬과 세로 가운데 정렬을 모두 다루고 있으며, 초보자도 쉽게 이해할 수 있도록 예시와 팁을 제공합니다.

같이 보기

CSS로 텍스트 가로(수평) 가운데 정렬하기

좌우 공간이 있는 요소: text-align: center

text-align 속성 - 텍스트 가로 정렬 설정
HTML 
<h5>좌우 공간이 있는 요소</h5>
CSS 
h5 {
    background-color: orange; /* 좌우 공간이 있는 요소임 */
    text-align: center; /* 이 요소의 가로 공간을 기준으로 텍스트를 가운데 정렬시킴 */
}
결과 화면

좌우 공간이 없는 요소: 좌우 공간이 있는 조상 요소에 text-align: center;

HTML 
<div class="container">
    <span>좌우 공간이 없는 요소</span>
</div>
CSS 
.container {
    background-color: orange; /* 좌우 공간이 있는 요소임 */
    text-align: center; /* 좌우 공간이 있는 조상 요소의 가로 공간을 기준으로 자손 요소의 텍스트를 가운데 정렬시킴 */
}
.container span {
    background-color: pink; /* 좌우 공간이 없는 요소임 */
}
결과 화면

좌우 공간이 없는 요소: 좌우 공간이 있는 부모 요소에 display: flex;와 justify-content: center;

HTML 
<div class="container">
    <span>좌우 공간이 없는 요소</span>
</div>
CSS 
.container {
    background-color: orange; /* 좌우 공간이 있는 요소임 */
    display: flex;
    justify-content: center; /* 자식 요소를 가로(수평) 기준으로 가운데 정렬시킴 */
}
.container span {
    background-color: pink; /* 좌우 공간이 없는 요소임 */
}
결과 화면

CSS로 텍스트 세로(수직) 가운데 정렬하기

자기 자신의 텍스트 콘텐츠를 가운데 정렬하기: line-height

HTML 
<h5>line-height 이용하기</h5>
CSS 
h5 {
    background-color: orange;
    line-height: 200px; /* 이 요소의 텍스트를 기준으로 위 아래 기준 텍스트를 가운데 정렬시킴 */
}
결과 화면
line-height 속성 - 텍스트 행간 높이 설정

자기 자신의 텍스트 콘텐츠를 가운데 정렬하기: display: flex;와 align-items: center;

HTML 
<h5>flex 이용하기</h5>
CSS 
h5 {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* 자식 요소를 세로(수직) 기준으로 가운데 정렬시킴 */
}
결과 화면

자기 자신의 텍스트 콘텐츠를 가운데 정렬하기: display: table-cell;과 vertical-align: middle;

HTML 
<h5>table cell 이용하기</h5>
CSS 
h5 {
    background-color: orange;
    height: 200px;
    display: table-cell;
    vertical-align: middle; /* 텍스트를 세로(수직) 기준으로 가운데 정렬시킴 */
}
결과 화면
CSS vertical-align 속성 완벽 가이드

부모 요소에 display: flex;와 align-items: center;

HTML 
<div class="container">
    <span>자식 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* 자식 요소를 세로(수직) 기준으로 가운데 정렬시킴 */
}
.container span {
    background-color: pink;
}
결과 화면

부모 요소와 자식 요소에 position과 transform 속성 사용하기

HTML 
<div class="container">
    <span>자식 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    position: relative;
}
.container span {
    background-color: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
결과 화면

CSS로 텍스트 가로(수평), 세로(수직) 가운데 정렬하기

자기 자신의 텍스트 콘텐츠를 가운데 정렬하기: line-height와 text-align: center

HTML 
<h5>line-height 이용하기</h5>
CSS 
h5 {
    background-color: orange;
    text-align: center; /* 이 요소의 가로 공간을 기준으로 텍스트를 가운데 정렬시킴 */
    line-height: 200px; /* 이 요소의 텍스트를 기준으로 위 아래 기준 텍스트를 가운데 정렬시킴 */
}
결과 화면

좌우 공간이 있는 부모 요소에 display: flex;와 justify-content: center; align-items: center;

HTML 
<div class="container">
    <span>자식 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    justify-content: center; /* 자식 요소를 가로(수평) 기준으로 가운데 정렬시킴 */
    align-items: center; /* 자식 요소를 세로(수직) 기준으로 가운데 정렬시킴 */
}
.container span {
    background-color: pink;
}
결과 화면

부모 요소와 자식 요소에 position과 transform 사용하기

HTML 
<div class="container">
    <span>자식 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    position: relative;
}
.container span {
    background-color: pink;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
결과 화면

같이 보기