[CSS] 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 할까?(centering)

크게 두가지 방법을 사용할 수 있다.

1. 'Flex Box'를 이용하는 경우

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

각각의 속성에 대해서도 한번 알아보도록 하자.

display

display는 HTML요소가 웹 페이지에 표시되는 방식을결정하는 CSS속성이다.
다양한 값이 있지만 콘텐츠를 중앙에 배치하는 맥락에서 가장 일반적으로 사용되는 값은 display: flex;이다.
요소의 display속성을 flex로 설정하면 해당 요소는 flex컨테이너가 되고 해당 하위 요소(내부 요소)는 flex항목이 된다.
Flexbox는 컨테이너 내의 요소를 더 쉽게 정렬하고 정렬할 수 있게 해주는 레이아웃 모델이다.

justify-content

justify-content는 플렉스 컨테이너에서 작동하여 컨테이너 내부 항목이 기본 축을 따라 정렬되는 방식(대부분의 경우 수평)을 정의하는 CSS속성이다.
justify-content의 일반적인 값은 다음과 같다.

• center: 주축을 따라 플렉스 항목의 중심을 맞춘다.
• flex-start: 주축의 시작 부분에 항목을 정렬한다.
• flex-end: 주축의 끝 부분에 항목을 정렬한다.
• space-between: 항목 사이에 동일한 간격으로 항목을 균등하게 분배한다.
• space-around: 항목 주위에 동일한 간격으로 항목을 균등하게 분배한다.

align-items

align-items는 플렉스 컨테이너에서 작동하여 컨테이너 내부 항목이 교차축을 따라 정렬되는(대부분의 경우 수직)을 정의하는 CSS속성이다.
align-items의 일반적인 값은 다음과 같다.

• center: 교차축을 따라 플렉스 항목의 중심을 맞춘다.
• flex-start: 교차축의 시작 부분에 항목을 정렬한다.
• flex-end: 교차축의 끝 부분에 항목을 정렬한다.
• baseline: 텍스트 기준선을 기준으로 항목을 정렬한다.
• stretch: 항목을 늘려 교차축을 따라 컨테이너를 채운다.

콘텐츠를 중앙에 배치하는 맥락에서 display: flex;는 컨테이너에 자주 사용되며,
justify-content: center; 및 align-items: center;는 해당 컨테이너 내의 항목을 가로 및 세로 중앙에 배치하는데 사용된다.

2. 'position & transform'을 이용하는 경우

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

'position'과 'transform' CSS속성을 사용해서 요소를 중앙에 정렬할 수 있다.
이 방식은 종종 'absolute positioning' 및 'transform translate'이라고 하며, Flexbox를 사용하지 않거나 위치가 지정된 다른 컨테이너 내에서 요소를 중앙에 배치해야할 때 요소를 중앙에 배치하는 대체 방법이다.

각각의 속성에 대해서도 알아보자

position

position: absolute;는 가장 가까운 위치의 조상(상위 요소의 위치 속성이 정적 이외의 것으로 설정된 경우를 제외하고 일반적으로 body요소)내에서 요소의 위치를 절대적으로 지정한다.

top & left

top: 50%; 및 left: 50%; 는 요소의 왼쪽 상단 모서리를 컨테이너의 가로 및 세로 중앙에 배치한다.

transform

transform: translate(-50%, -50%);는 요소를 자체 너비와 높이를 50%만큼 뒤로 이동하여 효과적으로 컨테이너 내에서 수평 및 수직 중앙에 배치한다.

이 방법은 요소를 중앙에 배치하는 데 효과적이지만 Flexbox 또는 grid 레이아웃을 사용하지 않는 특별한 이유가 있을 때 자주 사용된다는 점에 유의해야한다.
Flexbox와 grid는 더 다양하고 복잡한 레이아웃에 대한 더 나은 제어 기능을 제공하므로 일반적으로 대부분 센터링 및 레이아웃 작업에 선호된다.
그러나 'position' 및 'transform' 접근 방식은 특정 상황에서 유용할 수 있다.