중앙 정렬에 대한 궁극의 가이드 - CSS

이 블로그에서는 요소를 가운데 정렬하는 데 사용할 수 있는 6가지 기술(모범 사례 준수 순서)과 각 기술을 언제 사용해야 하는지에 대해 설명합니다. 여기서 중앙 정렬은 요소를 부모 요소의 수평 및 수직 중앙에 배치하는 것을 의미합니다.

.center class represents the element to be center aligned
.parent represents its parent element.

1. 변환 사용

사용 시기:

요소의 너비와 높이를 알 수 없는 경우

중앙에 하나의 포커스된 요소가 있는 여러 하위 요소가 있는 모달과 같은 카드입니다.

아이디어는 상단 및 왼쪽 - 50%로 절대 위치 지정을 사용한 다음 네거티브 변환을 적용하는 것입니다. 위쪽과 왼쪽에 사용된 값은 부모의 차원을 기준으로 결정되는 반면 translate 메서드의 값은 요소 자체의 차원을 기반으로 결정됩니다.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 플렉스 사용하기

사용 시기:

중앙에 배치할 요소가 하나 이상 있는 경우.

하위 요소가 동적이고 해당 크기를 알 수 없는 경우.

바닥글과 같이 중앙에 정렬해야 하는 항목 행이 있는 경우

아이디어는 부모 컨테이너를 flexbox로 만들고 다음과 같이 flex 속성을 사용하여 수평 및 수직 방향을 따라 요소를 중앙에 배치하는 것입니다.

.parent {
    display: flex;
    justify-content: center; 
    align-items: center;
}

스택이 중앙에 있도록 여러 요소를 다른 요소 위에 쌓아야 하는 경우 다음 줄을 추가하기만 하면 됩니다.

flex-direction: column; 

3. 마이너스 마진 사용

사용 시기:

요소의 높이와 너비를 알고 있는 경우.

아이디어는 변환 기술과 유사한 절대 위치 지정을 다시 사용하는 것이지만 변환하는 대신 요소 너비와 높이의 절반에 해당하는 음수 여백을 적용합니다.

$w: 200px; // SCSS Variable
$h: 100px; // SCSS Variable
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; // Negative margin of half the 
                        //  width and height

}

이 코드를 보다 일반적으로 만들기 위해 다음과 같이 calc() 속성을 사용합니다.

(#{$h} / 2) - Half the height
(#{$h} / 2) * -1) - Negated value of half the height
Which gives us:

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1); 

4. 그리드 사용

나는 최근에 css-tricks.com에서 이 멋진 기술을 발견했습니다.

사용 시기:

중앙에 배치해야 하는 자식 요소가 하나만 있는 경우.

아이디어는 그리드 컨테이너를 만들고 여백을 자동으로 설정하는 것입니다. non-grid 컨테이너에서 margin이 auto로 설정되면 margin-top과 bottom은 0 값을 갖습니다.

그러나 그리드 컨테이너에서는 margin-top과 bottom에 사용 가능한 공간이 균등하게 할당되므로 요소가 중앙에 배치됩니다.

.parent {
  display: grid;
}
.center {
  margin: auto;
}

그리드를 사용하여 중앙에 배치하는 또 다른 방법은 다음과 같습니다.

.parent {
  display: grid;
  place-items: center;
}

5. 패딩 사용

이 기술은 중앙 정렬에 권장되지 않지만 작동합니다.

사용 시기:

상위 요소의 높이를 알고/고정한 경우.

중앙 요소의 높이가 유연한 경우.

아이디어는 고정 높이가 알려진 컨테이너에 대해 고정 세로 패딩을 설정하고 자식 요소가 최대 높이와 ​​여백 자동을 차지하도록 허용하는 것입니다.

.parent {
  height: 600px; //Fixed height
  padding: 200px 0; //Fixed vertical padding
}
.center{
  margin: 0 auto;
  height: 100%; // Child takes max height
}

6. 테이블 셀 사용하기

이 기술은 오늘날 거의 사용되지 않으며 눈살을 찌푸릴 수 있습니다. 그러나 작동합니다.

아이디어는 디스플레이를 사용하여 부모가 테이블 셀처럼 동작하도록 강제하는 것입니다. 그런 다음 수직 중심 정렬을 위해 수직 정렬 속성을 사용하고 수평 중심 정렬을 위해 여백 자동을 사용합니다.

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

이것으로 요소를 중앙 정렬하는 6가지 방법을 마칩니다.

보너스 - 수평 센터링

가로 가운데 맞춤은 균일한 여백 또는 여백과 함께 제목 스타일 및 바닥글에 자주 사용됩니다.

텍스트 정렬 사용

사용 시기:

가운데 요소가 텍스트 콘텐츠/인라인-* 유형 요소인 경우

Inline-*에는 inline, inline-block, inline-flex, inline-table 등이 포함됩니다.

.parent {
   text-align: center;
}

블록 유형 하위 요소를 중앙에 배치할 수도 있지만 권장되는 방법은 아닙니다.

여백 사용

사용 시기:

중앙 요소가 블록 요소인 경우

.center {
    margin: 0 auto;
}

다음은 위의 모든 기술에 대한 작업 Codepen 데모입니다.


TL; DR: 여기 참조용으로 간결한 치트 시트가 있습니다. 자유롭게 다운로드하여 공유하십시오.


사용/탐구한 기술이 더 있으면 댓글로 알려주세요. 또한 더 많은 개발자 콘텐츠를 보려면 저를 팔로우하세요!