CSS를 가운데 정렬하는 방법

CSS에서는 중앙 정렬이 일반적인 문제입니다. 중심 정렬을 수행하는 방법에는 여러 가지가 있으며 이 문서에서는 그 중 일부를 소개합니다.

1. 텍스트 가운데 정렬

텍스트를 가로로 정렬하려면 다음 방법을 사용할 수 있습니다.

text-align: center;

이렇게 하면 요소 내의 모든 텍스트가 세로가 아닌 가로로 가운데 정렬됩니다.

텍스트를 수직으로 정렬하려면 다음 방법을 사용할 수 있습니다.

display: flex;
align-items: center;
justify-content: center;

이렇게 하면 Flexbox를 사용하여 요소의 모든 것을 수직 및 수평으로 가운데 정렬합니다.

2. 블록 레벨 요소 중앙 정렬

div 요소를 수평 및 수직으로 중앙 정렬하려고 한다고 가정해 보겠습니다. 방법은 다음과 같습니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

이렇게 하면 요소의 왼쪽 상단 모서리가 중앙 지점에 배치되어 요소가 중앙 정렬됩니다. 상위 요소의 . transform 속성은 요소의 중심점을 상위 요소의 중심점과 정렬하기 위해 요소를 위쪽 및 왼쪽으로 50% 이동하는 데 사용됩니다.

3. 이미지 중앙 정렬

이미지를 수평으로 정렬하려면 다음 방법을 사용하세요.

display: block;
margin: auto;

이렇게 하면 이미지가 수평으로 중앙 정렬됩니다. 이미지를 수직으로 정렬하려면 다음 방법을 사용할 수 있습니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4. 표를 중앙 정렬

표를 수평으로 정렬하려면 다음 방법을 사용할 수 있습니다.

margin: 0 auto;

이렇게 하면 표가 수평으로 중앙 정렬됩니다. 테이블을 수직으로 정렬하려면 다음 방법을 사용할 수 있습니다.

display: flex;
align-items: center;
justify-content: center;

이렇게 하면 Flexbox를 사용하여 테이블을 수직 및 수평으로 가운데 정렬합니다.

5. 하위 요소 중앙 정렬

하위 요소를 중앙 정렬하려면 다음 방법을 사용할 수 있습니다.

display: flex;
align-items: center;
justify-content: center;

이렇게 하면 Flexbox를 사용하여 모든 하위 요소를 수직 및 수평으로 중앙 정렬합니다.

이 글에서는 텍스트, 이미지, 블록 수준 요소, 표 등을 포함한 몇 가지 중앙 정렬 방법을 소개했습니다. 사용기간을 선택할 때에는 상황에 따라 가장 적합한 방법을 선택해야 합니다.

위 내용은 CSS를 가운데 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!