수평 및 수직 절대 위치 요소를 중앙에 배치하는 방법
- 高洛峰원래의
- 2017-02-24 13:35:071332검색
이 글에서는 절대 위치 요소의 수평 및 수직 센터링 방법을 주로 소개합니다. 참고로 필요한 친구들은 함께 살펴보세요
1.css로 센터링을 달성할 수 있습니다.
단점: 요소의 너비와 높이를 미리 알아야 한다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
2. CSS3는 수평 및 수직 중앙 정렬을 구현합니다.
참고: 요소의 크기 무엇이든 중앙에 위치할 수 있습니다. 하지만 이 쓰기 방식은 IE8 이상에서만 호환되며 모바일 단말에서는 무시할 수 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
3. margin: 자동으로 중앙 정렬
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>더보기 절대 위치 요소의 수평 및 수직 센터링 방법에 대한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.