센터 CSS

CSS 센터링: 전체 가이드

웹 디자이너나 프런트 엔드 개발자가 웹 페이지를 만들 때 직면하는 가장 일반적인 문제 중 하나는 요소를 센터링하는 방법입니다. 요소는 텍스트, 이미지, 비디오, 버튼 등이 될 수 있습니다. 이 글에서는 수평 중앙 정렬, 수직 중앙 정렬, 상위 요소 중앙 정렬 등 CSS를 사용하여 다양한 유형의 요소를 중앙 정렬하는 방법을 다룹니다.

1. 가로 중심 맞추기

먼저 요소를 가로로 가운데에 배치하는 방법에 대해 논의해 보겠습니다. 이는 다음 방법을 통해 달성할 수 있습니다.

1.1 텍스트 정렬 속성

요소가 블록 수준 요소인 경우 다음을 사용할 수 있습니다. text-align 텍스트 또는 인라인 요소를 수평으로 가운데 정렬하는 속성입니다. 이 속성은 탐색 모음, 제목 및 단락을 중앙에 배치하는 데 자주 사용됩니다.

예:

.container {
   text-align: center;
}

1.2 여백 속성

요소를 수평으로 중앙에 배치하는 또 다른 방법은 여백 속성을 사용하는 것입니다. 요소의 왼쪽 및 오른쪽 여백을 자동으로 설정할 수 있습니다.

예:

.container {
   width: 300px;
   margin: 0 auto;
}

1.3 flexbox 레이아웃

Flexbox는 수평 및 수직 중앙 정렬을 매우 간단하게 만드는 강력한 CSS 레이아웃 모델입니다. 수평 중앙 정렬의 경우 다음 CSS를 사용합니다.

.container {
   display: flex;
   justify-content: center;
}

이렇게 하면 컨테이너 요소가 Flexbox 컨테이너가 되고 하위 요소가 수평으로 중앙에 배치됩니다.

2. Vertical Centering

이제 요소를 수직으로 가운데에 배치하는 방법을 살펴보겠습니다. 이는 수평으로 중앙을 맞추는 것보다 조금 더 어렵지만 이를 달성하는 몇 가지 방법이 있습니다.

2.1 줄 높이

경우에 따라 줄 높이 속성을 사용하여 텍스트나 인라인 요소를 세로로 가운데에 맞출 수 있습니다.

예:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

span {
    font-size: 24px;
    line-height: 300px;
}

텍스트 한 줄이 세로 중앙에 오도록 줄 높이를 컨테이너 높이와 일치하도록 설정합니다.

2.2 변환 속성

변환 속성은 요소 자체를 기준으로 요소의 위치를 ​​지정하는 데 사용할 수 있습니다. 이것을translate()로 설정하고 Y값을 50%로 설정하면 요소가 수직으로 중앙에 배치됩니다.

.container {
    position: relative;
}

img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.3 Flexbox 레이아웃

고정 높이 요소의 경우 Flexbox 레이아웃을 사용하여 수직으로 중앙에 배치할 수 있습니다. 요소를 수직으로 중앙에 배치하려면 align-items를 center와 동일하게 설정하십시오.

.container {
    display: flex;
    align-items: center;
    height: 300px;
}

3. 상위 요소 내에서 중앙에 배치

마지막으로 상위 요소 내에서 하위 요소를 중앙에 배치하는 방법에 대해 논의하겠습니다.

3.1 절대 위치 및 여백 속성

하위 요소를 절대 위치로 설정한 다음 왼쪽, 오른쪽, 위쪽 및 아래쪽 여백을 0으로 설정하고 auto 키워드를 사용하여 하위 요소를 상위 요소의 중앙에 배치합니다.

.parent {
    position: relative;
    height: 300px;
}

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

또 다른 방법은 하위 요소의 왼쪽 및 오른쪽 여백을 자동으로 설정하는 것입니다. 이 경우 하위 요소는 블록 수준 요소여야 합니다.

.parent {
    height: 300px;
}

.child {
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

3.2 Flexbox 레이아웃

Flexbox 레이아웃을 사용하면 하위 요소를 상위 요소의 중앙에 배치하는 것이 매우 간단합니다. 상위 요소의 표시 속성을 flex로 설정한 다음 justify-content 및 align-items 속성을 사용합니다.

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

요약

CSS를 중앙에 배치하는 것은 아름답고 사용하기 쉬운 사용자 인터페이스를 만드는 데 중요합니다. 이 기사에서는 텍스트, 이미지, 비디오, 버튼 및 상위 요소의 세로, 가로 및 중앙 중앙 정렬을 포함하여 다양한 유형의 요소를 중앙에 배치하는 여러 가지 방법을 다루었습니다. 적절한 센터링을 사용하면 웹 디자인이 더 좋고 효율적이라는 것을 기억하십시오.

위 내용은 센터 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!