글자 세로 가운데 정렬

[ CSS 목차 보기 ]

이번 포스트에서는 글자를 세로 중앙 정렬에 대해서 알아보겠습니다. CSS에서 글자를 수직 가운데 정렬하는 방법이 쉬울 것 같지만 생각보다 까다롭습니다. 쉽게 구현되는 수평 가운데 정렬(text-align: center)과 대비됩니다. 직관적으로 text-vertical-align: center가 있으면 좋을텐데, 아쉽게도 현재 이러한 프로퍼티는 존재하지 않습니다. 비슷한 프로퍼티로 vertical-align가 있는데, vertical-align은 생각하는 것이랑 조금 다를 수 있습니다. vertical-align는 “줄 안”에서 글자를 세로 방향으로 정렬할 때 사용합니다. “block 요소 안”에서 요소를 세로 방향으로 정렬할 땐 사용할 수 없습니다. “줄 안”과 “block 요소 안”의 차이점을 정확히 모르신다면 [6] 줄 안에서 글자 정렬하기 / vertical-align 포스트를 참조하시길 바랍니다. 줄의 개념과 줄 안에서의 8가지 정렬선에 대해 깊게 이해하실 수 있을 것입니다. 여기서는 block 요소 안에서 요소들을 세로 가운데 정렬하는 4가지 방법을 소개하겠습니다. 이 중에서도, 가장 간단한 방법인 [1] line-height와 가장 유용한 [4] Flex는 꼭 알아두시기 바랍니다.

차례
1. line-height
2. 테두리선 가이드 전략
3. table
4. flex

[1] line-height

가장 간편하고 쉬운 방법은 line-height를 사용하는 것입니다. 상황을 정리해보자면, 정렬하고자 하는 글자를 자식 요소라고 한다면, 부모 요소의 높이의 가운데에 정렬하고자 하는 것입니다. line-height를 이용하는 방법은 자식 요소의 “줄 높이”를 부모 요소 “높이”에 일치시켜 줌으로써, 글자를 수직 가운데 정렬 시키는 방법입니다.

• 구현 결과:

• 간략한 설명:
  • 줄의 높이를 오렌지 박스의 높이(100px)와 같게 설정함으로써, 글자를 세로 가운데 정렬하였습니다. 자세한 설명이 필요하시면 다음 카드로 넘겨주세요.

• 예제 목표:
  • 줄(Line)이란 개념에 대해서 한 번 생각해 봅시다. 우리가 생각하고 있는 줄의 개념이 잘못 되어 있을 수도 있습니다.
• <div id=”orange-box”>ENJOY</div>
  • 먼저 코드 아래에 위치하고 있는 HTML 파트를 보겠습니다. 오렌지 박스 안에 ENJOY라는 글자를 바로 입력하였습니다.
• #organge-box의 CSS
  • text-align: center; 글자를 가로 가운데 정렬합니다.
  • background-color: rgb(231, 103, 64); 배경 색깔은 오렌지로 설정하였습니다.
  • border: 1px solid black; 테두리선을 1px 두께의 검정색 실선으로 설정하였습니다.
  • width: 200px; height: 100px; 오렌지 박스의 크기를 200 x 100 px로 설정하였습니다.
  • color: white; 글자 색깔을 흰색으로 설정였습니다.
• 결과 설명:
  • 결과를 보시면, 오렌지 박스 안에 “ENJOY”라는 글자가 들어가 있습니다. 여기서 “줄의 높이”는 얼마나 될까요?
  • 　이 질문에 대한 대답을 곰곰히 생각해 보지 않았다면, 어쩌면 ENJOY가 속해 있는 오렌지박스의 높이가 줄의 높이라 무의식적으로 생각하고 있었을 수도 있습니다. 그러면서 어떻게 ENJOY라는 글자를 줄 가운데 정렬시킬까만 생각하고 있었을 수도 있습니다. 하지만 실제로는, 줄은 글자 “ENJOY”가 있는 라인에만 있고, ENJOY라는 글자는 이미 줄에 수직 가운데 정렬이 되어 있는 상태입니다. 말이 어려우니 다음 카드에서 예제를 통해 알아보겠습니다.

• 예제 목표:
  • 줄의 개념을 알아보기 위해, 줄에 해당하는 부분을 파란선으로 표시해 보겠습니다.
• <div class=”line”>ENJOY</span>
  • 오렌지 박스(div#orange-box)안에 추가적으로 div 요소를 넣었습니다. CSS를 통해 div.line가 줄의 크기를 표시하도록 설정할 예정입니다.
• div.line의 CSS
  • 다른 CSS 파트는 앞 예제와 동일하므로 div.line 파트만 설명하겠습니다.
  • display: inline-block; div 요소는 기본적으로 block 요소입니다. 이를 명시적으로 inline-block으로 바꿔줍니다. 이렇게 inline-block 요소를 바꿔주면, div.line은 내부에 있는 요소들의 크기를 둘러싸게 됩니다. 이러한 성질을 이용하여 내부 줄의 크기를 시각화할 수 있습니다.
  • border: 1px solid blue; 테두리선을 1px 두께의 파란색 실선으로 설정하였습니다. 이 테두리선이 줄의 크기를 보여주게 됩니다.
• 결과 설명:
  • 결과를 보시면, “ENJOY” 글자 주위에 파란색 선이 생겼습니다. 이 파란선은 div.line 내부에 있는 자식요소들의 크기를 나타내기 때문에 “ENJOY”의 글자가 있는 줄의 크기를 나타냅니다. 따라서 block 요소(오렌지 박스)의 크기는 줄의 크기와 다르다는 것을 알 수 있습니다. “block 요소 크기” = “줄의 크기” + “줄 외의 크기”로 되어 있습니다. 이 점을 고려해 볼 때, 줄의 높이를 오렌지 박스 높이만큼 키운다면, 글자를 세로 가운데 정렬할 수 있을 것입니다. 다음 카드에서 예제를 통해 알아보겠습니다.

• 예제 목표:
  • line-height를 이용하여, 줄의 높이를 오렌지 박스 높이만큼 키워보겠습니다. 글자가 어떻게 정렬하는지 알아보겠습니다.
• div.line의 CSS
  • 다른 CSS 파트는 앞 예제와 동일하므로 중복 설명은 생략합니다.
  • line-height: 100px; div.line 안에 줄의 높이를 100px로 설정합니다. 100px는 오렌지 박스의 높이와 동일함에 주의해 주세요.
• 결과 설명:
  • 결과를 보시면, 줄의 높이(파란선)가 오렌지 박스의 높이와 같아졌음을 확인할 수 있습니다. 기본적으로 글자들은 줄의 세로 중앙에 정렬하기 때문에, 줄의 높이만을 오렌지 박스의 크기에 맞추면, 글자를 세로 가운데 정렬할 수 있습니다.

• line-height 방식의 한계점:
  • line-height는 간단하게 수직 가운데 정렬을 시킬 수 있다는 장점이 있습니다. 하지만 line-height를 부모요소의 높이에 맞춰줘야 하기 때문에, 부모요소의 높이가 고정되어 있을 때만 사용할 수 있다는 한계점이 있습니다.
• 예제 목표:
  • 여기서 혹시나 ‘line-height: 100%‘로 지정하면 부모요소의 높이가 변동이 생겨도 사용할 수 있지 않나요?’라고 질문을 던지시는 분이 계실수 있습니다. 아주 좋은 질문입니다! 하지만 이렇게 사용해도 가운데 정렬을 구현할 수 없습니다. 그 이유는 line-height의 퍼센트는 글자 크기를 기준으로 하기 때문입니다. 예제를 통해서 무슨 말인지 알아 보겠습니다
• div.line의 CSS
  • 다른 파트는 앞 예제와 동일하므로 중복 설명은 생략합니다.
  • line-height: 100%; div.line 안에 줄의 높이를 100%로 설정합니다.
• 결과 설명:
  • 결과를 보시면, 줄의 높이(파란선)가 글자의 높이와 같음을 확인할 수 있습니다. 이것은 line-height의 기준이 글자의 크기이기 때문입니다. 따라서 부모 요소의 크기가 정확히 고정되어 있지 않고, 역동적으로 바뀌거나 퍼센트로 설정되어 있을 때는 line-height로 설정할 수 없는 단점이 있습니다.

[1.1] 고급편

아래와 같이, 줄에서 각각의 글자의 수직 방향으로의 정렬은 vertical-align으로 할 수 있습니다. 각각의 글자들을 8가지 정렬선인 top, text-top, super, middle, baseline, sub, text-bottom, bottom에 정렬 시킬 수 있습니다. 관련 내용은 [6] 줄 안에서 글자 정렬하기 / vertical-align 포스트를 참조하시길 바랍니다.

[2] 테두리선 가이드 전략

두 번째 방법은 테두리선 가이드 전략을 이용하는 것입니다. 이 전략은 타겟요소를 부모요소의 특정 위치로 정렬시킬 때 많이 사용되어지는 고전적인 방법입니다. 하지만 브라우저의 버젼에 상관없이 사용할 수 있다는 큰 장점과 CSS가 제공하지 않는 방식으로도 정렬을 시킬 수 있다는 장점이 있습니다. 따라서 고급자들에겐 필수적으로 이해해야하는 방법 중에 하나 입니다. 이번 예제를 구현하는 동안 요소의 위치를 옮길 수 있는 두 가지 방식(transfome과 위치 속성)을 자연스럽게 익히게 됩니다. 이는 꼭 세로 정렬뿐만 아니라, 다른 목적으로도 활용할 수 있습니다. 예를 들어 [참고4. 테두리선 가이드 전략으로 float: center 구현방법] 포스트에서도 이 테두리선 가이드 전략을 사용하고 있습니다. 따라서 이번 섹션의 목적을 단순히 세로 정렬을 하는 것에만 두지 말고, transform과 위치 속성들의 원리를 배우는데 주안점을 두면 좋을 것 같습니다.

• 목표
  • 먼저 전체 코드를 확인하겠습니다.
• 구현결과

• • 결과를 보시면 오렌지 박스안에 글자 “ENJOY”가 세로 가운데 정렬을 하고 있음을 알 수 있습니다. 테두리선 가이드 전략은 정렬을 위해서 테두리선을 가이드선으로 활용합니다. 방법은 정렬하고자 하는 글자를 가이드선에 배치시키고, 최종적으로 가이드선을 원하는 곳으로 이동시키는 방법입니다. 이를 위해서는 요소들을 원하는 곳으로 움직여야 하는데, CSS에서는 다음과 같은 2가지 방법을 제공합니다. (1) 위치속성(left, right, top, bottom)을 이용한 방법과 (2) transform을 이용한 방법입니다. 따라서 이번 섹션에 들어가기 전에 앞서 “위치 속성”과 “transform”의 작동 원리와 차이점이 선행 학습이 되어 있어야, 왜 여기서는 transform이 사용되고, 다른 곳에서는 위치속성이 사용되었는지 이해할 수 있습니다. [참고1. 위치속성과 transform의 차이점] 포스트에서 자세히 다루고 있습니다.

• 진행순서
  • 테두리선 가이드 전략을 최종적으로 이해하기 위해 [1] transform을 이용한 이동 스킬1과 [2] 위치 속성을 이용한 이동 스킬을 먼저 설명하고, 최정적으로 이 둘을 합쳐서 최종 구현해 보겠습니다.
• 목표
  • 이번 카드에서는 먼저 [1] transform을 이용한 이동 스킬에 대해서 알아보겠습니다.
• <div id=”orange-box”></div>
  • 먼저 코드 아래 부분에 위치한 HTML 파트부터 보겠습니다. div#orange-box 요소를 생성합니다. 나중에 CSS 파트에서 배경색을 오렌지 색깔로 지정할 예정이기 때문에, 이 요소를 편의상 오렌지 박스라 부르겠습니다.
• <div class=”line”>ENJOY</div>
  • 오렌지 박스 안에 div.line 요소를 생성하고, 안에 글자 “ENJOY”를 넣습니다.
• #orange-box의 CSS
  • background-color: rgb(231, 103, 64); div#orange-box의 배경 색깔을 오렌지 색깔로 지정합니다.
  • border: 1px solid black; 테두리선을 1px 두께의 검정색 실선으로 설정합니다.
  • width: 200px; height: 100px; 오렌지 박스의 크기를 200 x 100 px로 설정합니다.
  • color: white; 글자 색깔을 흰색으로 설정합니다.
• .line의 CSS
  • text-align: center; 글자를 가로 가운데 정렬합니다.
  • border: 1px solid blue; 테두리선을 1px 두께의 파란 실선으로 설정합니다. div.line의 높이는 글자의 높이와 동일함을 기억해주세요.
  • transform: translateY(-50%); div.line 요소 높이의 50%만큼 위로 이동시킵니다. 여기서 50%의 기준이 되는 것이 자기 자신의 크기임을 기억해주세요.
• 구현결과
  • 노란 점선은 이해를 돕기 위해 예제 코드에는 없지만 추가적으로 넣은 것으로, 줄의 이동 전의 위치와 크기를 표시합니다. 결과를 보시면, 글자들이 노란 점선 윗 테두리에 정렬되어 있음을 볼 수 있습니다. 이는 transform: translateY (-50%)에 의해 파란 박스(div.line)이 자신의 높이 x 50%만큼 위로 이동했기 때문입니다. 이렇게 함으로써 글자를 테두리선에 정렬 시킬 수 있습니다. 그리고 이 테두리선을 가이드선으로 이용하여 글자를 원하는 곳으로 이동할 수 있습니다.
• 질문
  • 혹시 독자들 중에 “transform: translateY(-50%) 대신에 위치 속성인 top: -50%를 사용해서 옮기면 되지 않나요?“라고 생각하시는 분들이 계실 수도 있습니다. 아주 좋은 질문입니다. 이 부분이 이번 섹션에서 전달하고자 하는 핵심 내용입니다. 이는 다음 카드에서 예제와 함께 알아보겠습니다.

• 목표
  • transform: translateY(-50%) 대신에 top: -50%를 사용하면 어떻게 달라지는지 확인합니다.
• #orange-box의 CSS
  • margin-top: 80px; 오렌지 박스 위쪽 여백을 80px로 설정합니다. 이렇게 설정한 이유는 글자 “ENJOY”를 위쪽으로 이동시킬 때, 이동된 글자를 보이게 하기 위해서입니다. 만약 이렇게 여백을 설정하지 않으면, 글자가 화면 밖에 위치하므로 위치를 확인할 수 없습니다.
• .line의 CSS
  • border: 1px solid blue; div.line 요소의 테두리선을 1px 두께의 파란 실선으로 설정합니다.
  • top: -50%; div.line 요소를 위쪽으로 -50% 이동 시킵니다. 여기서 50%의 기준이 되는 것은 부모 요소(오렌지 박스)의 크기입니다.
  • position: relative; top과 같은 위치 속성들을 사용할 때는 무조건 position 프로퍼티를 설정해야 합니다. 어떤 것을 기준으로 하여 위치를 결정할지 정해야 하기 때문입니다. 중요하니 공식으로 외워주세요. 여기서는 position: relative로 설정되었기 때문에, 부모 요소인 오렌지 박스를 기준으로 위치를 잡습니다.
• 구현 결과
  • 앞 카드의 결과와는 다르게, 글자 ENJOY가 훨씬 위로 올라간 것을 확인할 수 있습니다. 이런 결과가 나온 이유를 top: -50%는 부모 요소의 크기를 기준으로 계산하기 때문입니다. 정리 하자면, 위치속성은 부모 요소의 크기를 기준으로 계산하고, transform은 자신의 크기를 기준으로 계산합니다. 매우 중요하니 꼭 기억해주시기 바랍니다.

• 목표
  • 여기서는 [2] 위치 속성을 이용한 이동 스킬에 대해서 알아보겠습니다. 앞 예제에서는 transform: translateY(-50%)을 이용하여 글자를 줄의 윗 테두리에 정렬하였습니다. 그 코드에 위치 속성만을 더하여 최종적으로 글자를 오렌지 박스의 세로 가운데에 정렬해보겠습니다.
• .line의 CSS
  • text-align: center; 글자를 가로 가운데 정렬시킵니다.
  • transform: translateY(-50%); 앞 예제에서 알아 봤듯이, 글자 ENJOY를 줄의 윗 테두리선에 정렬 시킵니다. transform은 자신의 크기를 기준으로 계산하기 때문에 50%는 줄의 높이의 절반에 해당합니다.
  • top: 50%; 위치 속성은 부모 요소를 기준으로 계산합니다. div.line을 부모 요소 오렌지 박스의 중간으로 위치합니다. 이렇게 설정하면 div.line의 윗 테두리선이 오렌지 박스의 50% 지정에 위치하게 됩니다. 따라서 글자가 수직 가운데 정렬하게 됩니다.
  • position: relative; 위치 속성을 이용하기 위해서 position 프로퍼티를 설정하였습니다.
• 구현 결과
  • 글자 ENJOY가 오렌지 박스 세로 가운데에 정렬하였음을 확인할 수 있습니다. 테두리선 가이드 전략은 약간 복잡하게 느껴질 수도 있는데, 원리만 이해한다면, CSS 프로퍼티가 제공하지 않는 방식으로 정렬시킬 수 있기 때문에 고급자들에겐 꼭 필요한 내용이라 할 수 있습니다. 그리고 line-height의 한계점이었던, 부모 요소의 크기가 변할지라도 세로 가운데 정렬을 시킬 수 있는 장점이 있습니다.
• 　

[3] display: table

CSS table을 이용해서도 세로 가운데 정렬을 할 수 있습니다. 테이블을 구현 하는 방법으로는 “CSS table”과 “HTML table” 두 가지가 있습니다. CSS table은 HTML table와 기능적으로 비슷하면서도, HTML table과는 다르게 매우 유연하게 설정할 수 있습니다. 부모 요소의 display를 table로 설정하고, 자식 요소들의 display를 table-cell로 설정함으로써 CSS table을 이용할 수 있습니다.

• 전체 코드
  • CSS table을 이용한 세로 가운데 정렬에 관한 구현 코드는 위와 같습니다.
• 출력 결과

• • 글자 “ENJOY”는 오렌지 박스의 세로 가운데 정렬을 하고 있습니다. 자세한 설명은 다음 카드에서 진행하겠습니다.

• 예제 목표
  • CSS table의 기본 지정 방법과 세로 정렬에 관한 vertical-align 프로퍼티에 관해서 알아봅니다.
• <div id=”orange-box”></div>
  • 먼저 코드 아래에 위치한 HTML 파트부터 보겠습니다.
  • div#orange-box 요소를 생성합니다. 이 요소의 배경색을 오렌지 색깔로 지정할 예정이기 때문에, 편의상 오렌지 박스라고 부르겠습니다.
• <div class=”line”>ENJOY</div>
  • 오렌지 박스 안에 div.line 요소를 생성하고, 글자 “ENJOY”를 넣었습니다.
• #orange-box의 CSS
  • background-color: rgb(231, 103, 64); 배경색을 오렌지 색깔로 지정합니다.
  • border: 1px solid black; 테두리선을 1px 두께의 검정 실선으로 설정합니다.
  • width: 200px; height: 100px; 오렌지 박스의 크기를 200 x 100 px로 설저합니다.
  • color: white; 글자의 색깔을 흰색으로 설정합니다.
  • display: table; CSS table을 생성합니다. 부모 요소의 display를 table로 설정함으로써, 자식 요소들을 테이블의 셀들로 취급할 수 있습니다.
• .line의 CSS
  • display: table-cell; div.line을 CSS table의 셀로 지정합니다. 셀로 설정되는 순간 div.line의 크기(height와 width)는 오렌지박스 크기와 같아집니다. 그리고 셀 정렬에 관한 vertical-align을 사용할 수 있습니다.
  • vertical-align: middle; 셀의 세로 방향의 정렬을 가운데로 설정합니다. 프로퍼티 값이 center가 아니라 middle임에 유의합니다. 현재 요소가 table-cell로 지정되어 있으면 vertical-align의 작동이 기존의 vertical-align과 다르게 작동합니다. 기존의 vertical-align은 [6] 줄 안에서의 글자 정렬하기 | vertical-align 포스트를 참고하시길 바랍니다. table-cell에서는 vertical-align 프로퍼티 값으로 top, middle, bottom을 지정할 수 있으며, 그 값에 따라 자식 요소들의 위치가 셀의 위, 중간, 아래로 정렬됩니다.
  • text-align: center; 글자의 가로 가운데 정렬을 시킵니다
• 구현결과
  • 정리해 보자면, CSS table을 이용하여 글자를 정렬할 때는 부모 요소를 display: table로 지정하고, 정렬하고자 하는 요소를 display: table-cell로 지정합니다. 그리고 정렬에 관한 vertical-align 프로퍼티(top, middle, bottom)를 이용하여 글자들을 정렬할 수 있습니다.
  • 　CSS table은 편리하게 vertical-align 프로퍼티를 제공하기 때문에, 직관적이고 간편한 장점이 있습니다. 또한 부모요소의 크기가 변동하더라도 세로 가운데 정렬을 할 수 있다는 장점이 있습니다.

[4] Flex

정렬에 관한 모든 것은 flex으로 가능하다라고 해도 과언이 아닙니다. 부모 요소의 display를 flex로 설정하고, 관련 프로퍼티들을 이용하여 여러가지 방식으로 자식 요소들을 정렬시킬 수 있습니다. 여기서는 가로 정렬에 관한 프로퍼티로 justify-content, 세로 정렬에 관한 프로퍼티로 align-items을 알아봅니다. align-items에 item이 단수가 아니라 복수형태로 s가 붙는다는 것에 주의합니다.

• 전체 코드:
  • 전체코드는 위와 같습니다.
• 출력 결과:

• 오렌지 박스 안에 “Enjoy”라는 글자가 가운데 정렬되었음을 확인할 수 있습니다. 자세한 설명은 다음 카드에 준비되어 있습니다.

• 예제 목표
  • 여기서는 flex의 기본 지정 방법과 수평 가운데 정렬에 대해서 알아보겠습니다.
• <div id=”orange-box”>ENJOY</div>
  • 먼저 코드 아래에 위치한 HTML 파트부터 보겠습니다. div#orange-box 요소를 만들고 안에 글자 “ENJOY”를 넣었습니다.
• #orange-box의 CSS
  • background-color: rgb(231, 103, 64); div#orange-box의 배경색깔을 오렌지 색깔로 지정합니다.
  • border: 1px solid black; 테두리선을 1px 두께의 검정색 실선으로 설정합니다.
  • width: 200px; height: 100px; 오렌지 박스의 크기를 200 x 100 px로 설정합니다.
  • color: white; 글자 색깔을 흰색으로 설정합니다.
  • display: flex; flex를 설정할 때는, 정렬하고자 하는 요소의 부모 요소의 display 프로퍼티 값을 flex로 설정해주면 됩니다.
  • justify-content: center; justify-content는 자식 요소를 가로 방향으로 정렬시키고자 할 때 사용합니다. 여기서는 가운데 정렬을 시키고자 center로 설정하였습니다.
• 구현 결과
  • 결과를 보시면, 오렌지 박스 안에 글자 “ENJOY”는 가로 가운데 정렬했음을 확인할 수 있습니다. flex로 요소를 정렬하고자 할 때, 정렬하고자 하는 요소의 부모 요소의 display를 flex로 지정하고 관련 프로퍼티를 설정해주면 됩니다. 다음 카드에서는 세로 방향으로 가운데 정렬하는 방법에 대해서 알아보겠습니다.

• 예제 목표
  • 이번에는 flex 관련 프로퍼티 중에서 수직 가운데 정렬을 할 때 사용하는 align-items에 대해서 알아보겠습니다.
• #orange-box의 CSS
  • 다른 부분들은 앞 예제와 동일하므로 중복 설명은 생략합니다.
  • align-items: center; 자식 요소를 수직 가운데 정렬합니다.
• 출력 결과
  • 출력 결과를 보시면, 오렌지 박스 안에 글자 “ENJOY”가 수직 가운데 정렬을 하고 있습니다. 이렇게 수직 방향으로 정렬을 설정하고 싶을 때 사용하는 프로퍼티는 align-items입니다. 여기서 items는 단수가 아니라 복수형태로 적혀 있음에 유의합니다.

• 예제 목표
  • display: flex로 설정하면, 해당 요소는 inline-block 성질을 같게 되는 것을 예제를 통해 알아보겠습니다.
• <div class=”line”>ENJOY</div>
  • 먼저 코드 아래에 부분에 위치한 HTML 파트부터 보겠습니다. 오렌지 박스 안에 div.line 요소를 추가하여, 글자 “ENJOY”를 둘러쌌습니다. div.line을 flex로 가운데 정렬할 예정인데, 이렇게 될 때 요소의 테두리 크기가 inline-block 형태로 바뀌는지를 확인할 예정입니다.
• .line의 CSS
  • border: 1px solid blue; div.line 요소의 테두리를 1px 두께의 파란 실선으로 표시합니다.
• 출력 결과
  • 부모 요소인 오렌지 박스(div#orange-box)에 display: flex를 설정하였기 때문에, 자식 요소인 div.line이 가운데 정렬을 하였습니다. 그리고 div.line의 테두리선이 파란색으로 표시됨을 볼 수 있습니다. 여기서 눈여겨볼 부분은 파란 박스가 글자를 둘러싸고 있다는 것입니다. 이렇게 내용물을 둘러싸고 있다는 것은 요소가 inline-block 또는 inline 형태에 해당할 수 있는데, 요소의 크기와 위치를 변경할 수 있으므로 inline-block에 해당합니다. inline-block 요소가 내용물 크기를 왜 둘러싸는지 메커니즘이 궁금하신 분들은 [참고5. inline-block과 block에서의 자동 크기 맞춤] 포스트를 참조하시길 바랍니다. 참고로 block 형태는 한 줄을 다 차지하는 형태가 되어야 합니다. 아래 결과는 위 코드와 동일한 코드에서 flex에 관련된 display: flex; justify-content: center; align-items: center; 부분을 제거하고 출력한 결과입니다.

• • 보시는 바와 같이, div.line은 기본적으로 block 요소이기 때문에, 파란 박스가 한 줄을 다 차지하고 있음을 볼 수 있습니다. 정리하자면, flex로 요소를 정렬 시킬 때 해당 요소는 inline-block 요소로 바뀝니다.

참고
[1] 위치속성과 transform의 차이점
[2] 요소, 노드, 태그 개념
[3] ID 선택자 표기법
[4] 테두리선 가이드 전략으로 float: center 구현하기
[5] inline-block과 block에서의 자동 크기 맞춤
[6] 줄 안에서 글자 정렬하기 | vertical-align
[ CSS 목록 보기 ]