CSS div를 중앙에 표시하는 방법
- coldplay.xixi원래의
- 2021-03-11 14:12:2052593검색
CSS div를 중앙에 표시하는 방법: 1. 절대 절대 위치 지정을 사용합니다. 코드는 [
절대 중앙 위치 지정 ]입니다. 2. 위치 변환을 사용합니다. 3. 여백을 중앙 위치 지정으로 사용합니다.
이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.
CSS div를 중앙에 표시하는 방법:
1. 절대 위치 지정 가장 일반적으로 사용되는 중앙 위치 지정 방법으로 현재 시중의 브라우저에서는 이를 기본적으로 지원합니다. writing method
<html>
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{margin:0;padding:0}
.absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px; }
</style>
</head>
<body>
<div>我是absolute居中定位</div>
</body>
</html>2. Translate positioning 자체적인 오프셋을 통해 위치를 지정하는 CSS3 Transform의 속성으로, div의 너비와 높이를 알 필요가 없습니다. js에서는 너비와 높이를 백분율로 설정할 수 있습니다. IE 브라우저 3. 여백은 중앙에 위치하며 div의 너비와 높이를 결정할 필요가 없습니다. 여백 추가: 자동 천재적인 IE 브라우저 를 지원하지 않습니다. 4. 고정 중앙 위치 지정 이것은 탐색 모음에 가장 일반적으로 사용될 수 있습니다. 탐색 모음이 중앙에 있고 페이지와 함께 스크롤되지 않습니다 권장 관련 튜토리얼: CSS 비디오 튜토리얼 위 내용은 CSS div를 중앙에 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{margin:0;padding:0}
.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
</style>
</head>
<body>
<div>我是translate居中定位</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{margin:0;padding:0}
.marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
</style>
</head>
<body>
<div>我是margin居中定位</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{margin:0;padding:0}
.fixedCenter{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background:rgb(67,163,244);}
</style>
</head>
<body>
<div>我是fixed居中定位</div>
</body>
</html>