CSS 센터링 방법에 대한 자세한 설명

CSS 센터링은 프론트엔드 엔지니어들이 자주 겪는 문제이자, 기본 스킬 중 하나이기도 합니다. 오늘 편집자는 CSS 센터링 솔루션을 정리하고 정리했습니다. 현재 수평 센터링, 수직 센터링, 수평 및 수직 센터링을 포함한 15가지 솔루션이 있습니다. 누락된 내용이 있으면 하나씩 추가해 가며 메모로 간주할 수 있습니다. ㅋㅋㅋ 이 방법은 인라인 요소(inline), 인라인 블록(inline-block), 인라인 테이블(inline-table), inline-flex 요소의 수평 중앙 정렬에 효과적입니다.

핵심 코드:

.center-text {    text-align: center;
 }

1.2 블록 수준 요소는 가로 중심에 배치됩니다.

고정 너비 블록 수준 요소의 왼쪽 여백 및 오른쪽 여백을 자동으로 설정하면 블록 수준 요소를 가로 중심에 배치할 수 있습니다. . 핵심 코드:

.center-block {  margin: 0 auto;
}

1.3 여러 블록 수준 요소를 가로 가운데에 배치

1.3.1 인라인 블록 사용

한 행에 두 개 이상의 블록 수준 요소가 있는 경우 블록 표시를 설정합니다. 레벨 요소 다중 블록 레벨 요소를 수평으로 중앙에 배치하려면 상위 컨테이너의 inline-block 및 text-align 속성을 입력하십시오.

핵심 코드:

.container {    text-align: center;
}.inline-block {    display: inline-block;
}

1.3.2 디스플레이 사용: flex탄성적 레이아웃(flex)을 사용하여 수평 중앙 정렬을 달성합니다. 여기서 justify-content는 기본 축(가로 축)에서 유연한 상자 요소의 정렬을 설정하는 데 사용됩니다. ) 방향, 이 예에서는 하위 요소가 가로 및 중앙에 표시되도록 설정되었습니다.

핵심 코드:

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

2 수직 센터링

2.1 단일 라인 인라인(inline-) 요소는 수직으로 센터링됩니다

의 높이(height)와 라인 높이(line-height)를 설정하여 인라인 요소가 동일하므로 요소가 수직으로 중앙에 배치됩니다.

핵심 코드:

#v-box {    height: 120px;    line-height: 120px;
}

2.2 여러 줄 요소를 수직으로 가운데 정렬

2.2.1 테이블 레이아웃 사용(테이블)테이블 레이아웃의 수직 정렬: 중간을 사용하면 하위 요소를 수직으로 가운데 정렬할 수 있습니다. 핵심 코드:

.center-table {    display: table;
}.v-cell {    display: table-cell;    vertical-align: middle;
}

2.2.2 플렉스 레이아웃 사용(flex)플렉스 레이아웃을 사용하여 수직 센터링을 달성합니다. 여기서 flex-direction: 열은 주축 방향을 수직으로 정의합니다. Flex 레이아웃은 CSS3에 정의되어 있으므로 이전 브라우저에서는 호환성 문제가 있습니다.

핵심 코드:

.center-flex {    display: flex;    flex-direction: column;    justify-content: center;
}

2.2.3 "고스트 요소" 사용

"고스트 요소"(고스트 요소) 기술을 사용하여 수직 센터링을 달성합니다. 즉, 상위 컨테이너에 100% 높이 의사 요소를 배치하여 텍스트 및 의사 요소 요소는 수직 중앙 정렬을 위해 수직으로 정렬됩니다. 핵심 코드:

.ghost-center {    position: relative;
}.ghost-center::before {    content: " ";    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle;
}.ghost-center p {    display: inline-block;    vertical-align: middle;    width: 20rem;
}

2.3 수직 중심 블록 수준 요소

2.3.1 고정 높이 블록 수준 요소

중앙 요소의 높이와 너비를 알고 있으므로 수직 중심 문제는 매우 간단합니다. . 요소를 상단에서 50% 위치에 절대적으로 배치하고 요소 높이의 절반을 위쪽으로 오프셋하도록 margin-top을 설정하여 수직 중심에 놓을 수 있습니다.

핵심 코드:

.parent {  position: relative;
}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; 
}

2.3.2 높이를 알 수 없는 블록 수준 요소

세로 중앙에 있는 요소의 높이와 너비를 알 수 없는 경우 CSS3의 변환 속성을 사용하여 Y축을 50만큼 역으로 오프셋할 수 있습니다. % 수직 센터링을 달성합니다. 그러나 일부 브라우저에는 호환성 문제가 있습니다.

핵심 코드:

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);
}

3 가로 및 세로 가운데 맞춤

3.1 고정 너비 및 높이 요소는 가로 및 세로 가운데 맞춤

여백을 통해 요소 전체 너비의 절반을 변환하여 요소를 가로 가운데 맞춤 그리고 수직으로.

핵심 코드:

.parent {    position: relative;
}.child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    left: 50%;    margin: -70px 0 0 -170px;
}

3.2 알 수 없는 너비 및 높이 요소는 가로 및 세로 중앙에 배치됩니다.

2D 변환을 사용하여 너비 및 높이의 절반을 가로 및 세로 방향 모두로 변환하여 요소가 가로 및 세로 중앙에 배치되도록 합니다. . 핵심 코드:

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

3.3 플렉스 레이아웃 사용

플렉스 레이아웃 사용, 여기서 justify-content는 기본 축(가로축) 방향에서 유연한 상자 요소의 정렬을 설정하거나 검색하는 데 사용됩니다. -items 속성은 Flex 컨테이너의 현재 행의 교차축(세로축) 방향으로 Flex 항목의 정렬을 정의합니다.

핵심 코드:

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

3.4 그리드 레이아웃 사용

그리드를 사용하여 수평 및 수직 중앙 정렬을 구현하는 것은 호환성이 좋지 않으므로 권장되지 않습니다.

핵심 코드:

.parent {  height: 140px;  display: grid;
}.child { 
  margin: auto;
}

데모 프로그램:

Demo code

3.5 화면의 가로 및 세로 중심 맞추기

화면의 가로 및 세로 중심 맞춤은 매우 일반적으로 사용되며 일반 로그인 및 등록 페이지에 필요합니다. 더 나은 호환성을 보장하려면 테이블 레이아웃도 사용해야 합니다.

핵심 코드:

.outer {    display: table;    position: absolute;    height: 100%;    width: 100%;
}.middle {    display: table-cell;    vertical-align: middle;
}.inner {    margin-left: auto;    margin-right: auto; 
    width: 400px;
}

데모 프로그램:

데모 코드

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