안녕하세요! 프론트엔드 개발 공부에 열중하시는 모습이 정말 멋지십니다. CSS 레이아웃은 처음엔 헷갈리기 쉽지만, 원리를 깨우치고 나면 퍼즐 맞추기처럼 재미있어지는 분야죠.

오늘 우리가 함께 번역하고 씹어먹어 볼 MDN 문서는 '블록, 절대 위치(absolute), 그리고 테이블 레이아웃에서의 박스 정렬(Box alignment)'입니다.

Flexbox나 Grid에서는 요소를 정렬하는 게 꽤 익숙해지셨을 텐데요. 그렇다면 그 옛날(?)부터 쓰이던 평범한 display: block이나, 둥둥 떠다니는 position: absolute, 그리고 고전적인 display: table에서는 이런 최신 정렬 속성들이 과연 어떻게 작동할까요?

저와 함께 공식 문서를 하나하나 부드러운 구어체로 풀어서 이해해 봅시다. 실무에서 바로 써먹을 수 있는 팁도 팍팍 넣어드릴게요!

---

블록, 절대 위치, 테이블 레이아웃에서의 박스 정렬 (Box alignment for block, absolutely positioned, and table layouts)

CSS 박스 정렬(CSS box alignment) 모듈은 여러 가지 다양한 레이아웃 방식(Flex, Grid 등)에서 '정렬'이 어떻게 작동하는지 상세히 다루고 있습니다. 이 가이드에서는 그중에서도 블록(block) 레이아웃이라는 맥락 안에서 박스 정렬이 어떻게 동작하는지 탐구해 볼 겁니다. 여기에는 float된 요소, 위치가 지정된(position된) 요소, 그리고 테이블 요소들이 포함됩니다.

이 문서는 블록 레이아웃과 박스 정렬 사이의 특별한 관계에 초점을 맞추고 있습니다. 따라서, 레이아웃 방식들에 공통적으로 적용되는 박스 정렬의 기본적인 특징들을 먼저 다루고 있는 박스 정렬 개요(box alignment overview) 문서를 함께 읽어보시는 것을 강력히 추천합니다.

---

이 문서의 내용 (In this article)

• align-content와 justify-content (align-content and justify-content)
• justify-self
• align-self
• 현재 이러한 레이아웃에서 정렬하는 방법 (Aligning in these layout methods today)
• 참고 자료 (See also)

---

align-content와 justify-content (align-content and justify-content)

먼저 짚고 넘어갈 점! justify-content 속성은 블록 컨테이너(block containers)나 테이블 셀(table cells)에는 적용되지 않습니다. 아무리 적어도 무시당한다는 뜻이죠.

반면에, align-content 속성은 박스의 내용물(contents)을 컨테이너 내부에서 정렬하기 위해 블록 축(block axis, 기본적으로 위아래 세로 방향)을 따라 적용됩니다.

이때, 블록 레이아웃은 안에 있는 내용물 전체를 통째로 하나의 '단일 정렬 대상(alignment subject)'으로 취급합니다. 그래서 내용물들 '사이사이'에 여백을 나누어주는 space-between, space-around, space-evenly 같은 분배 방식을 요구하면, 브라우저는 "어? 나눌 덩어리가 하나밖에 없는데?" 하고 당황하게 됩니다. 이럴 땐 기본값인 폴백(fallback) 정렬 방식으로 알아서 대체되어 적용됩니다.

💡 강사 팁:
justify-content와 align-content는 Flexbox나 Grid처럼 '여러 개의 아이템'을 이리저리 배치하기 위해 탄생한 속성입니다. 그냥 평범한 <div> (블록) 안에는 텍스트나 다른 요소들이 하나의 거대한 흐름(문서 흐름)으로 뭉쳐있기 때문에, 이런 최신 정렬 속성들이 제대로 힘을 쓰지 못하는 게 당연하답니다.

---

justify-self

justify-self 속성은 아이템 하나를 자신을 감싸고 있는 컨테이닝 블록 안에서 인라인 축(inline axis, 기본적으로 좌우 가로 방향)을 따라 정렬할 때 사용됩니다.

하지만 이 속성은 float된 요소(floated elements)나 테이블 셀에는 적용되지 않습니다.

---

align-self

align-self 속성은 블록 레벨 박스(block-level boxes, float 포함)에는 아예 적용되지 않습니다. 왜냐하면 블록 축(세로 방향) 상에는 둘 이상의 아이템이 존재할 수 있어서, "너 혼자 알아서 세로로 정렬해!"라는 명령이 성립하기 어렵기 때문이죠. 마찬가지로 테이블 셀에도 적용되지 않습니다.

절대 위치가 지정된 요소 (Absolutely positioned elements)

자, 그럼 position: absolute를 주어 공중에 둥둥 띄워버린 요소는 어떨까요? 이 요소들에게는 '정렬 컨테이너(alignment container)'라는 게 생깁니다. 이 컨테이너는 가장 가까운 포지셔닝된 블록(positioned block)을 기준으로 top, left, bottom, right 값을 모두 계산하여 생성된 특별한 구역입니다.

이때 align-self나 justify-self에 normal 키워드를 주면, 기본적으로 stretch(쭉 늘리기)로 작동합니다. 단, 해당 요소가 <img>나 <video> 같은 대체 요소(replaced element)인 경우에는 비율이 망가지면 안 되기 때문에 stretch 대신 start(시작점 기준 정렬)로 작동하게 됩니다.

---

현재 이러한 레이아웃에서 정렬하는 방법 (Aligning in these layout methods today)

현재 브라우저들은 블록 레이아웃(일반적인 <div> 등) 안에서의 박스 정렬(CSS Box Alignment 속성들)을 완벽하게 지원하지 않습니다.

그래서 현실적으로 여러분이 선택할 수 있는 정렬 방법은 두 가지입니다.
1. 예전부터 쓰던 기존의 레이아웃 정렬 기법을 그대로 쓰거나,
2. 컨테이너 안에 아이템이 단 하나뿐이더라도 그 컨테이너를 플렉스 컨테이너(display: flex)로 바꿔버려서, Flexbox가 제공하는 막강한 정렬 속성들을 마음껏 사용하는 것이죠.

Flexbox가 세상에 나오기 전, 블록 요소들을 가로로 중앙 정렬할 때 가장 전형적으로 쓰이던 방법은 바로 자동 마진(auto margins)을 설정하는 것이었습니다. 마진(margin)에 auto를 주면 해당 방향의 남는 공간을 모두 싹쓸이(absorb)해버리는 성질이 있습니다. 따라서 왼쪽과 오른쪽 마진을 둘 다 auto로 설정하면, 양쪽에서 남는 공간을 똑같이 밀어내어 블록이 자연스럽게 한가운데로 가게 됩니다.

.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

💡 강사 팁:
이 margin: 0 auto; (위아래 0, 좌우 auto) 기법은 프론트엔드 개발자라면 자다가도 툭 치면 나올 정도로 정말, 정말 많이 쓰는 방식입니다. 웹 프로필 사이트나 독서 기록 사이트의 본문 영역을 모니터 한가운데에 예쁘게 위치시킬 때 무조건 쓰게 되실 거예요!

만약 테이블 레이아웃(display: table, display: table-cell 등)을 다루고 계신다면, 셀 안의 내용물을 세로로 정렬하기 위해 아주 오래된 친구인 vertical-align 속성을 사용할 수 있습니다.

하지만 실무에서 마주치는 수많은 상황에서 가장 속 편한 해결책은, 블록 컨테이너를 플렉스 아이템(또는 플렉스 컨테이너)으로 바꿔버리는 것입니다. 이렇게 하면 여러분이 그토록 원하던 강력한 정렬 기능들을 마음껏 쓸 수 있으니까요.

아래 예제를 볼까요? 컨테이너 안에 아이템이 딱 하나밖에 없지만, 오로지 이 아이템을 완벽하게 정중앙에 배치(alignment)하기 위한 목적으로 부모 컨테이너에 display: flex를 주었습니다.

HTML

<div class="box">
  <div></div>
</div>

CSS

.box {
  height: 300px;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

/* 정렬을 위해 마법의 주문(Flexbox)을 외워봅니다! */
.box {
  display: flex;
  align-items: center;      /* 세로(교차축) 중앙 정렬 */
  justify-content: center;  /* 가로(주축) 중앙 정렬 */
}

.box div {
  width: 100px;
  height: 100px;
}

MDN Playground에서 실행해보기 (Live Sample)

이렇게 하면 안쪽에 있는 파란색 작은 박스가, 점선으로 된 큰 박스의 정중앙에 완벽하게 둥둥 떠 있는 것을 보실 수 있습니다. 이게 바로 현대 프론트엔드 개발자들이 "요소를 한가운데에 어떻게 놓나요?"라는 질문에 가장 먼저 대답하는 콤보(display: flex + justify-content: center + align-items: center)입니다!

---

참고 자료 (See also)

• CSS 박스 정렬 (CSS box alignment) 모듈
• 박스 정렬 개요 (Box alignment overview)
• Flexbox에서의 박스 정렬 (Box alignment in flexbox)
• CSS Grid 레이아웃에서의 박스 정렬 (Box alignment in CSS grid layout)
• 다단 레이아웃에서의 박스 정렬 (Box alignment in multiple-column layout)

---

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요?
[Yes][No]

기여하는 방법 알아보기(Learn how to contribute)
이 페이지의 마지막 수정일은 2025년 11월 20일이며, MDN 기여자들에 의해 수정되었습니다.

• GitHub에서 이 페이지 보기
• 이 콘텐츠의 문제점 신고하기

---

👨‍🏫 마무리 강사 코멘트:
정리하자면 이렇습니다. "기본 블록(display: block)한테 최신 정렬 기술(justify-content 등)을 써봤자 잘 안 먹힌다!"
그래서 옛날 방식(margin: 0 auto)을 쓰거나, 아니면 그냥 속 편하게 부모 요소에 display: flex를 줘버리는 게 실무의 핵심입니다. 포트폴리오 만드실 때 헤더나 푸터의 로고, 텍스트 정렬할 때 이 점 꼭 명심하세요! 파이팅입니다!