1. 단일 라인 교차 축 중심 

align-items 속성을 사용하여 교차 축을 따라 항목을 정렬 할 수 있습니다. 

center 속성과 함께 사용하는 경우 flex-direction이 행 또는 행 반대 인 경우 세로로, flex-direction이 열 또는 열 반대 인 경우에는 가로로 항목을 중앙에 배치합니다.

가로축을 따라 가운데에 있는 항목이 행 기반 레이아웃에서 보이는 방식입니다.

.container {    
    display: flex;
    flex-direction: row;
    align-items: center;
}

정의 컨텐츠를 변경하지 않았으므로 기본값인 flex-start를 사용합니다. 이러한 방식으로 플렉스 항목은 기본 (수평) 축의 시작과 교차 (수직) 축의 중심에 정렬됩니다.

열 기반 레이아웃으로 작업 할 때 align-items 속성을 사용하여 플렉스 항목을 가로로 가운데에 맞출 수 있습니다.이 경우 교차 축이 가로로 실행됩니다. 

.container {    
    display: flex;
    flex-direction: column;
    align-items: center;
}

여기서 justify-content 속성은 기본값 (flex-start)으로 유지됩니다. 열 기반 레이아웃에서와 같이 기본 축은 수직 축이며, flexbox는 항목을 컨테이너의 상단 (기본 축의 시작)에 맞추고 항목은 align-items : 중심 규칙에 따라 가로로 가운데에 맞춥니 다.

2. 단일 품목 교차 축 중심 

교차 축을 따라 플렉스 항목을 대량으로 중앙에 배치 할 수 있을 뿐만 아니라 align-items을 재정의하는 align-self CSS 속성을 사용하여 하나의 단일 항목 만 중앙에 배치하도록 선택할 수 있습니다. 다음과 같은 방법으로 플렉스 컨테이너 대신 개별 플렉스 아이템에 정렬 자체를 추가해야 합니다.

<!-- HTML -->
<div class="container">
        <div class="item"></div>
        <div class="item center"></div>
        <div class="item"></div>
</div>

/* CSS */
.container {
    display: flex;
    flex-direction: row;
}
.center {
    align-self: center;
    background: magenta;
}

아래 스크린샷에서 볼 수 있듯이 가로 축을 따라 두 번째 항목을 가운데에 배치합니다 (수직으로 행 기반 레이아웃이므로). 동시에 나머지 항목은 기본 위치에 있습니다.

위의 예제는 행 ​​기반 flexbox 레이아웃을 사용하지만 열 기반 레이아웃의 경우 align-item도 동일한 방식으로 작동합니다.

3. 다중 라인 교차 축 중심 

flexbox 레이아웃 모듈을 사용하면 십자선을 따라 여러 줄의 항목을 중앙에 배치 할 수도 있습니다. align-content 속성을 사용하면 여러 줄로 줄 바꿈 할 때 항목 주위에 공간을 분산 시킬 수 있습니다. align-items과 align-content의 차이점을 이해하기는 다소 어려우므로 서로 비교하는 방법을 살펴 보겠습니다.

flex-wrap을 랩으로 설정하고 align-items 속성 만 가운데에 놓으면 다음과 같은 이점이 있습니다.

.container {    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

랩핑 플렉스 아이템은 (수직으로) 횡축을 따라 중심에 있지만 공간은 균등하게 분배 됩니다. 이것은 다음과 같은 방식으로 align-content을 통해 변경할 수 있습니다.

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

아래에서 볼 수 있듯이 align-content 속성은 교차 축을 따라 공간 분포를 담당합니다. 중앙으로 설정되면 멀티 라인 품목은 가능한 한 플렉스 컨테이너의 중앙을 향해 "당겨집니다".

align-content은 두 줄 이상의 플렉스 항목이 있는 경우에만 작동합니다. 따라서 하나 또는 두 개의 플렉스 아이템이 있을 때 걱정할 필요가 없습니다.

완벽한 중심 플렉스 아이템 

Flexbox를 사용하여 완벽하게 중앙에 배치 된 레이아웃을 만들려면 주축과 횡축을 따라 중앙에 배치해야 합니다. 

가장 빈번한 사용 사례는 한 요소를 다른 요소의 중앙에 놓을 때입니다. flexbox의 경우 이것은 세 가지 CSS 규칙이며 div뿐만 아니라 모든 종류의 HTML 요소와 작동합니다.

<!-- HTML -->
<div class="container">
    <div class="item"></div>
</div>

/* CSS */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

flex-direction 속성에 값을 설정하지 않았으므로 기본값인 row이 사용됩니다.

단일 항목 외에도 flexbox를 사용하여 여러 행의 항목을 완벽하게 가운데에 맞출 수 있습니다. 행 기반 레이아웃의 경우 다음 CSS를 사용해야 합니다.

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

그리고 이것은 flex-direction이 column로 설정 될 때 완벽하게 중앙에 위치한 여러 줄 레이아웃이 어떻게 보이는지 입니다.

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

결론 

Flexbox 센터링을 사용하면 컨테이너 안에 모든 종류의 HTML 요소를 배치 할 수 있습니다. display: flex에 플렉스 규칙 추가 : 항목을 가로, 세로 또는 둘 다 가운데에 맞추려는 경우 편리합니다. Flexbox 센터링은 완벽하게 중앙에 위치한 타이틀, 이미지, 비디오 및 제품 갤러리 등을 만드는 데 탁월한 솔루션입니다.