중앙 레이아웃
< /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;} 아이디어: 속성 값 속성, 분해 문제를 이해합니다.