CSS를 중앙에 배치하는 방법

CSS 중앙 정렬 방법: 1. 수평 중앙 정렬의 경우 블록 수준 요소에는 "text-align"을, 블록 수준 요소에는 "margin"을, 블록 수준 요소에는 "position" 및 "transform"을 사용할 수 있습니다. 2. 수직 센터링의 경우 인라인 요소에는 "line-height"를, 블록 수준 요소에는 "flexbox"를, 블록 수준 요소에는 "position"과 "transform"을 사용할 수 있습니다.

웹 디자인에서 센터링은 특히 레이아웃에서 매우 일반적인 요구 사항입니다. CSS는 센터링을 달성하기 위한 다양한 방법을 제공합니다. 가장 일반적인 방법 중 일부를 살펴보겠습니다.

1. 가로 가운데 정렬

1. p, h1, h2 및 기타 태그와 같은 블록 수준 요소의 내부 텍스트를 가로로 가운데 정렬하려면 text-align(블록 수준 요소의 경우)

text-align 속성을 사용하세요. 샘플 코드는 다음과 같습니다.

div {
text-align: center;
}

2. margin(블록 수준 요소의 경우)

margin 속성을 사용하여 블록 수준 요소를 가로로 가운데에 설정하세요. 및 오른쪽 여백을 자동으로 지정합니다. 예를 들어 코드는 다음과 같습니다.

div {
margin: 0 auto;
}

3 위치 및 변환 사용(블록 수준 요소의 경우)

위치 속성 및 변환 속성은 다음과 같습니다. 블록 수준 요소의 수평 중심을 달성하고 위치 속성을 절대 또는 고정으로 설정한 다음 변환 속성을 사용하여 요소를 왼쪽으로 50% 이동해야 합니다. 샘플 코드는 다음과 같습니다.

div {
위치: 절대;
왼쪽: 50%;
변환: 번역X(-50%);
}

2. 줄 높이( 인라인 요소의 경우)

line-height 속성은 인라인 요소를 수직으로 가운데에 배치할 수 있습니다. 샘플 코드는 다음과 같습니다.

div {

height: 100px;

line -height: 100px;
}


2. Flexbox 사용(블록 수준 요소의 경우)

flexbox는 CSS3에서 도입된 레이아웃 방법으로, 요소의 수직 중심 배치를 쉽게 설정할 수 있습니다. 컨테이너를 선택한 다음 align-items를 사용합니다. center는 요소를 수직으로 가운데에 배치합니다. 샘플 코드는 다음과 같습니다.

.container {

display: flex;

align-items: center;
justify-content: center;
}


3. 위치 및 변환 사용(블록 수준 요소의 경우)

position 속성과 변환 속성은 요소의 수직 중앙 정렬을 달성할 수도 있습니다. 위치 속성을 절대 또는 고정으로 설정한 다음 변환 속성을 사용하여 요소를 50% 위쪽으로 이동해야 합니다. 샘플 코드는 다음과 같습니다.

div {

위치: 절대;

상단: 50%;
변환: 번역Y(-50%);
}


요약:

위는 센터링을 달성하는 여러 가지 방법입니다. CSS에는 각각 장점과 단점이 있으며 다양한 상황에서 목표 달성에 적합한 방법을 선택할 수 있습니다. 동시에 최신 브라우저는 CSS3 지원 기능이 점점 더 좋아지고 있으며 CSS3의 flexbox 레이아웃을 사용하는 것도 매우 편리한 선택입니다.

위 내용은 CSS를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!