[CSS] 플렉스박스와 그리드의 가운데 정렬

플렉스박스와 그리드는 유연한 레이아웃을 만들 수 있는 HTML의 최신 박스 모델입니다.

기존에는 HTML 요소 안에 아이템(들)을 가운데 정렬하기가 여러가지로 불편했었는데, 이런 점들까지 획기적으로 개선해서 전용의 정렬 속성을 제공합니다.

플렉스박스와 그리드 안의 아이템을 수평, 수직으로 가운데 정렬하려면 다음처럼 CSS 속성으로 구현할 수 있습니다.

가운데 정렬을 위한 "align-items" 와 'justify-content" 속성은 플렉스박스, 또는 그리드의 셀 영역 안에 있는 아이템이 영역 크기보다 작아서 여백이 있는 경우에 적용되는 속성입니다.

<div class="wrap">
	<div class="item"></div>
</div>

.wrap{
    width: 400px;
    height: 400px;
    border: 10px solid #888;
    background-color: #f0f0f0;
    display: grid;
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
}
.item{
    width: 50px;
    height: 50px;
    background-color: #a00;
}

플렉스박스와 그리드의 가운데 정렬 핵심은 다음 두 속성입니다.

    align-items: center;

    justify-content: center;

이 속성 값을 활용하면 플렉스박스, 또는 그리드 안의 아이템을 원하는 원하는 위치에 배치할 수 있습니다.

멀티 아이템 그리드 수평 정렬

예외적으로 그리드에 셀이 여러 개인 경우에는 개별 셀에 그리드 수평 정렬 속성인 "justify-content" 속성이 적용되지 않습니다.

4개의 아이템이 2행 2열로 구성된 다음의 그리드 셀들을 앞서의 가운데 정렬 속성으로 정렬하면 다음과 같이 보여집니다.

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

따라서 여러 개의 아이템을 위해서는 수평 정렬을 별도로 해야 합니다.

다음과 같이 아이템 클래스에 좌우 자동 마진을 지정하면 그리드 셀 안의 아이템이 같은 좌우 여백이 생기고 셀 안에서 가운데 정렬이 됩니다.

.item{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color: #a00;
}