CSS 중심

Css 센터링: 1. 가로 센터링은 "margin: 0 auto; text-align: center"를 통해 이루어집니다. 2. 가로 센터링은 "display:flex"를 통해 이루어집니다. 3. 가로 센터링은 "display:table-"을 통해 이루어집니다. cell"과 "margin-left"는 중앙 정렬을 달성합니다.

CSS의 중심을 설정하는 방법:

1. CSS의 수평 중심을 맞추려면 margin: 0 auto;

이 방법은 CSS의 수평 센터링을 달성하기 위해 가장 일반적으로 사용됩니다. 프런트 엔드 개발에서 CSS의 수평 센터링의 약 60%는 "margin: 0 auto; text-align: center"를 통해 달성됩니다.

2. CSS의 수평 중심을 맞추려면 display:flex를 사용하세요.

Flexbox와 호환되는 경우가 많아지면서 "display:flex"를 통한 CSS의 수평 중앙 정렬 솔루션이 점점 더 대중화되고 있습니다.

display:flex를 통한 CSS 수평 센터링의 원리는 상위 요소가 display:flex;flex-direction:column;이고 하위 요소가 align-self:center;

이것은 CSS 수직 센터링의 원리와 동일합니다. , flex 제외 -방향에는 차이가 있습니다. 하나는 행(기본값)이고 다른 하나는 열입니다.

3. display:table-cell 및 margin-left를 통해 CSS 가로 가운데 맞춤을 구현합니다.

부모 요소와 자식 요소의 너비가 모두 결정되는 상황에서는 display:table-cell 및 margin-left를 통해 CSS 가로 센터링을 구현하는 것이 적합합니다.

사용하면 상위 요소에 table-cell이 표시되고 하위 요소에는 남은 너비의 절반만큼 왼쪽 여백이 제공됩니다.

위 내용은 CSS 중심의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!