CSS에서 웹 페이지를 기준으로 div가 가운데에 오도록 설정하는 방법

CSS를 사용하여 div가 웹페이지를 기준으로 중앙에 오도록 설정하는 방법: 1. div에 절대 레이아웃 "position:absolute;"를 사용하고 위쪽, 왼쪽, 오른쪽 및 아래쪽 값을 2. div에 절대 레이아웃을 사용하고 상단을 배치하고 왼쪽 값은 모두 "50%"로 설정합니다. 3. css3의 변환 속성을 통해 div를 중앙에 배치합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS의 웹 페이지를 기준으로 div가 중앙에 오도록 설정하는 방법은 무엇입니까?

Css를 사용하여 div

1. div에 절대 레이아웃 "position:absolute;"를 사용합니다.

방법 1: div에 절대 레이아웃 position:absolute;을 사용합니다. 위쪽, 왼쪽, 오른쪽, 아래쪽은 같지만 반드시 0일 필요는 없습니다. 그리고 margin:auto

{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2를 설정하고 div에 절대 레이아웃을 사용하고 위쪽 및 왼쪽 값을 50%로 설정합니다.

방법 2: 이 방법을 사용하려면 div 높이의 너비와 너비를 알아야 합니다. 절대 레이아웃 위치 사용: div에 대한 절대 값을 50%로 설정합니다. 50%는 페이지 창 너비와 높이의 50%를 나타냅니다. , 왼쪽 및 위쪽 크기는 div

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3의 너비와 높이의 절반입니다. div는 CSS3의 변환 속성을 통해 중앙에 배치됩니다.

방법 3: div:absolute의 절대 위치 지정을 사용하고 왼쪽 및 위쪽 값을 50%로 설정합니다. CSS3 변환 속성을 사용하세요. 변환: 번역(-50%, -50%)

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

두 개의 div가 있고 내부의 작은 div가 외부의 큰 div를 기준으로 수평, 수직 및 중앙에 정렬된 경우 여러 가지 방법이 있습니다.

1. 위치와 여백:자동을 사용하여 달성하세요. 상위 요소는 position:relative를 설정하고 하위 요소는 position:absolute를 설정하고 위쪽, 왼쪽, 오른쪽 및 아래쪽 값을 동일하게 설정합니다.

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2. 위치를 사용하세요. 상위 요소는 position:relative를 설정하고, 하위 요소는 position:absolute를 설정합니다. 위쪽과 왼쪽을 50%로 설정하고 왼쪽과 최대 하위 요소 크기의 절반까지 설정하세요

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

디스플레이 사용: flex. 이 방법을 사용하려면 브라우저 호환성 설정이 필요합니다.

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

3. 변환: 번역()을 사용하세요. 상위 요소는 position:relative를 설정하고, 하위 요소는 position:absolute를 설정합니다. 위쪽과 왼쪽을 50%로 설정합니다. 마지막으로 변환 설정: 번역(-50%, -50%)

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

권장 학습: "css 비디오 튜토리얼"

위 내용은 CSS에서 웹 페이지를 기준으로 div가 가운데에 오도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!