CSS 센터링의 여러 가지 방법

웹 디자인에서 센터링은 미학과 가독성 모두에 매우 중요합니다. CSS에는 센터링을 달성하는 방법이 많이 있습니다. 다음은 일반적으로 사용되는 몇 가지 방법입니다.

1. 텍스트 중앙 정렬

1. 인라인 요소의 텍스트 중앙 정렬

한 줄 텍스트의 경우 text-align 속성을 사용하여 중앙 정렬을 완료할 수 있습니다.

<div style="text-align: center;">这里是居中的文本</div>

2. 블록 요소 텍스트 중앙 정렬

여러 줄 텍스트 또는 블록 요소의 경우 여백 속성을 사용하여 왼쪽 및 오른쪽 여백을 자동으로 설정하고 너비를 100%가 아닌 것으로 설정하여 중앙 정렬을 완료할 수 있습니다.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. 요소 센터링

1. 가로 센터링

margin 속성을 사용하고 왼쪽 및 오른쪽 여백을 자동으로 설정하여 가로 센터링을 완료합니다.

<div style="margin: 0 auto;"></div>

2. 수직 센터링

수직 센터링 방법은 더 복잡하고 구현 방법도 다양합니다.

(1) Flexbox

를 사용하여 상위 요소에 display:flex 및 align-items:center를 설정하여 수직 중앙 정렬을 구현합니다.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) table-cell

을 사용하여 상위 요소에 display:table 및 Vertical-align:middle을 설정하고, 하위 요소에 display:table-cell을 설정하여 수직 중앙 정렬을 구현합니다.

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) 자식 요소에 position:absolute;top:50%;left:50% 및Transform:translate(-50%,-50%)를 설정하려면 절대

를 사용하여 수직 중앙 정렬을 달성합니다.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) line-height를 사용하세요

상위 요소에서 height와 line-height를 동일하게 설정하고, 하위 요소에서 수직 정렬:중간을 설정하여 수직 중심 맞춤을 달성합니다.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

위의 방법을 통해 웹 페이지 요소의 중심 효과를 쉽게 얻을 수 있습니다. 페이지에서 더 나은 시각적 효과를 얻으려면 특정 상황에 따라 적절한 방법을 선택해야 합니다.

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