CSS 중심 레이아웃 요약

중앙 레이아웃

demo

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;}

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