[인라인 요소] 인라인, 인라인 블록, 인라인 테이블에 적용 가능 , inline-flex 요소
.center { text-align: center; }
【블록 수준 요소】블록 수준 요소에 적용
①하나의 블록 수준 요소
.center { margin: 0 auto; }
②여러 블록 수준 요소
方法一:将块级元素变为行内块级元素 html部分: <main class="inline-block-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .inline-block-center { text-align: center; } .inline-block-center p { display: inline-block; text-align: left; } 方法二:flex布局 html部分: <main class="flex-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .flex-center{ display:flex; justify-content:center; }
[인라인 요소]
①단일 인라인 요소:
사례 1: 언제 링크 또는 텍스트에 래핑된 요소가 있는 경우 위쪽 및 아래쪽 패딩을 동일하게 설정
.link { padding-top: 30px; padding-bottom: 30px; }
사례 2: 링크 또는 텍스트에 래퍼가 없는 경우 줄 높이와 높이를 동일하게 설정
.center-text-trick { height: 100px; line-height: 100px }
②다중 인라인 요소:
方法一:将多个行内元素分别置于table-cell中 html部分: <table> <tr> <td> 1 </td> </tr> </table> css部分: table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ } 方法二:将父元素设置为display:table,将自身设置为display:table-cell html部分: <p class="center-table"> <p>1</p> </p> css部分: .center-table { display: table; height: 250px; width: 240px; } .center-table p { display: table-cell; vertical-align: middle; } 方法三:使用felex html部分: <p class="flex-center"> <p>1</p> </p> css部分: .flex-center{ display: flex; justify-content: center; flex-direction: column; height: 400px;/*父容器必须有固定高度*/ } 方法四:当以上代码均不可用时,可尝试此奇淫巧技 html部分: <p class="ghost-center"> <p>1</p> </p> css部分: .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; }
[블록 수준 요소]
①알려진 요소 높이(절대 위치 지정+음수 여백)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/ }
②요소 높이를 알 수 없음(이전 방법과 유사)
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
③flex 레이아웃
.parent { display: flex; flex-direction: column; justify-content: center; }
① 예 너비와 높이가 고정된 요소
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/ }
②폭과 높이가 고정되지 않은 요소(너비와 높이가 고정되지 않은 이전 요소와 동일, 변환을 사용하여 해결)
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3flexbox 레이아웃 사용
아아아아위 내용은 CSS 센터링 문제에 대한 해결책 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!