요소의 수평 및 수직 중앙 정렬을 구현하는 CSS

실제 프로젝트에는 세로 중심 방법이 많이 있습니다. 예를 들어 모바일 페이지에는 많은 팝업 프롬프트 콘텐츠가 다음과 같이 간략하게 정리되어 있습니다.
페이지를 많이 만들었는데 세로 중심 문제가 항상 존재했다고 생각합니다. 어떤 방법은 상대적으로 간단하고 어떤 방법은 실제 상황에 따라 계산해야 한다고 생각합니다. 실제로 사용한 방법은 가장 포괄적이지는 않지만 실제 효과는 여전히 좋습니다.

쓸데없는 소리는 그만하고 바로 코드로 넘어가세요:

/* 常用的三种方法 */

/* 第一种 */
div{
	width: 200px;
	height: 200px;
	margin: auto;
	background: pink;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 第二种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
/* 第三种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

이를 구현하려면 html 부분으로 직접 이동하세요

관련 권장 사항:

CSS 제어 스크롤 막대 스타일 분석

CSS3 사용자 정의 스크롤 막대 스타일의 자세한 예

CSS 설정 div 스크롤 막대 스타일의 예

위 내용은 요소의 수평 및 수직 중앙 정렬을 구현하는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!