초보자를 위한 CSS로 요소 가운데 정렬하기

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

같이 보기

CSS로 요소 가로(수평) 가운데 정렬하기

요소 자체로 가로 가운데 정렬을 하기 위해선 이 요소가 블록 레벨 요소인지 아니면 인라인 레벨 요소인지에 따라 달라집니다. 먼저, 블록 레벨 요소와 인라인 레벨 요소의 개념 차이부터 설명합니다.

블록 레벨 요소와 인라인 레벨 요소의 차이점 비교
비교 항목 블록 레벨 요소 인라인 레벨 요소
요소의 줄바꿈 부모 요소가 display: flex;, display: inlin-flex;, display: grid;, display: inline-grid; 등과 같이 자식 요소를 좌우 정렬 시키는 요소가 아닐 경우 이 요소의 앞 요소와 뒷 요소를 줄바꿈시킴 이 요소의 앞 요소와 뒷 요소를 줄바꿈시키는 성격이 없음
레벨을 결정하는
display 속성의 값		 display: block;, display: table;, display: flex;, display: grid;
등이 있음		 display: inline;, display: inline-block;, display: inline-table;, display: inline-flex;, display: inline-grid;
등이 있음
대표적인 요소 <div>, <h1~h6>, <p>
등의 요소가 있음		 <span>, <a>, <img>
등의 요소가 있음

요소 자체로 가운데 정렬하기: 블록 레벨 요소를 margin-left: auto; margin-right: auto;로 가운데 정렬하기

아래는 대표적인 블록 레벨 요소인 <div> 요소를 가운데 정렬하는 방법입니다.
<div> 요소는 display 속성의 기본 값이 block입니다.

HTML 
<div>블록 레벨 요소</div>
HTML <div> 태그 - 올바른 이해와 사용 방법
CSS 
div {
    width: 150px;
    height: 150px;
    background-color: pink;
    margin-left: auto;
    margin-right: auto;
}
결과 화면

위의 예제와 같이 블록 레벨 요소는 margin-left: auto; margin-right: auto;로 가운데 정렬할 수 있습니다.

다음은 인라인 레벨 요소를 display 속성을 바꿔서 블록 레벨 요소로 변경하여 요소 자체로 가운데 정렬한 사례입니다.

HTML 
<span>인라인 레벨 요소</span>
CSS 
span {
    display: block; /* span 요소의 display 기본 값은 inline으로 인라인 레벨 요소를 블록 레벨 요소로 변경함 */
    width: 150px;
    height: 150px;
    background-color: pink;
    margin-left: auto;
    margin-right: auto;
}
결과 화면

위의 예제와 같이 인라인 레벨 요소를 블록 레벨 요소로 변경 후 margin-left: auto; margin-right: auto;로 가운데 정렬할 수 있습니다.

좌우 공간이 있는 조상 요소로 가운데 정렬하기: text-align: center;로 인라인 레벨의 자손 요소를 가운데 정렬하기

text-align - 인라인 콘텐츠 가로 정렬 설정
HTML 
<div class="container">
    <span>인라인 레벨의 자손 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    text-align: center; /* 좌우 공간이 있는 조상 요소의 가로 공간을 기준으로 자손 요소의 텍스트, 이미지 등 인라인 레벨 content를 가운데 정렬시킴 */
}
.container span {
    background-color: pink;
결과 화면

좌우 공간이 있는 부모 요소로 가운데 정렬하기: display: flex;와 justify-content: center; align-items: center;로 블록 레벨 요소나 인라인 레벨의 자식 요소를 가운데 정렬하기

좌우 공간이 있는 부모 요소로 가운데 정렬하기: display: flex;와 justify-content: center; align-items: center;로 블록 레벨 요소를 가운데 정렬하기

HTML 
<div class="container">
    <div>블록 레벨의 자식 요소</div>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* 자식 요소(블록, 인라인 레벨 요소)를 가로(수평) 기준으로 가운데 정렬시킴 */
}
.container div {
    width: 150px;
    height: 150px;
    background-color: pink;
}
결과 화면

좌우 공간이 있는 부모 요소로 가운데 정렬하기: display: flex;와 justify-content: center; align-items: center;로 인라인 레벨의 자식 요소를 가운데 정렬하기

HTML 
<div class="container">
    <span style="background-color: pink;">인라인 레벨의 자식 요소</span>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* 자식 요소(블록, 인라인 레벨 요소)를 가로(수평) 기준으로 가운데 정렬시킴 */
}
.container span {
    background-color: pink;
}
결과 화면

CSS로 요소 세로(수직) 가운데 정렬하기

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

이 방법은 블록 레벨 요소나 인라인 레벨 요소 모두에 적용 가능합니다. 아래의 예제는 블록 레벨 요소인 <div> 요소를 예로 들었습니다.

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

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

이 방법은 블록 레벨 요소나 인라인 레벨 요소 모두에 적용 가능합니다. 아래의 예제는 블록 레벨 요소인 <div> 요소를 예로 들었습니다.

HTML 
<div class="container">
    <div>블록 레벨의 자식 요소</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 200px;
    position: relative;
}
.container div {
    width: 150px;
    height: 150px;
    background-color: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

CSS로 요소 가로(수평), 세로(수직) 가운데 정렬하기

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

이 방법은 블록 레벨 요소나 인라인 레벨 요소 모두에 적용 가능합니다. 아래의 예제는 블록 레벨 요소인 <div> 요소를 예로 들었습니다.

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

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

이 방법은 블록 레벨 요소나 인라인 레벨 요소 모두에 적용 가능합니다. 아래의 예제는 블록 레벨 요소인 <div> 요소를 예로 들었습니다.

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

같이 보기