CSS 중심 레이아웃 요약-CSS 튜토리얼-php.cn

CSS 중심 레이아웃 요약

高洛峰

풀어 주다： 2016-11-23 15:15:42

원래의

1370명이 탐색했습니다.

중앙 레이아웃

demo

< /div>

1. 가로 중심

1> 솔루션 1 inlink-block+text-align

.child {display:inlink-block;}

.parent {text-align:center;}

장점: 호환성 좋음

단점: 하위 요소 너비 및 높이를 설정할 수 없음

2> mar gin

.child {display:table; margin:0 auto;}

장점: 하위 항목(본인)만 설정하면 됩니다.

3> +변형

.parent {위치:상대적;}

.child {위치:절대;왼쪽:50%;변형:translateX(-50%);}

장점: 하위 요소는 다른 요소에 영향을 미치지 않습니다

단점: 호환성 문제

4> 옵션 4 flex+justify-content

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

장점: 상위 노드

를 설정하거나

.parent {display:flex;}

.child { margin:0 auto;}

단점: 하위 버전의 Flex 및 IE는 지원하지 않습니다.

2. 수직 센터링

1> ; 솔루션 1 table-cell+vertical-align

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

장점: 상위 노드만 설정하면 호환성이 좋음

2> 옵션 2 절대 +변형

.parent {position:relative;}

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

장점: 하위 요소는 다른 요소에 영향을 미치지 않습니다

단점: 호환성 문제

3> 옵션 3 flex+align-items

. parent {display:flex-items:center;}

장점: 상위 노드만 설정

단점: 호환성 문제

3. 가로 및 세로 모두 중앙

1> 옵션 1 inline-block+text-align+table-cell+vertical-align

.parent {text-align:center;display:table-cell ;세로 정렬: 중간;}

.child {display:inline-block;}

2> 옵션 2 절대+변형

.parent {위치:상대; }

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

3> justify-content+align -items

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

아이디어: 속성 값 속성, 분해 문제를 이해합니다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 중심 레이아웃 요약