DIV 센터링을 달성하는 세 가지 CSS 방법
- 小云云원래의
- 2018-02-02 11:16:342587검색
이 글은 CSS에서 p 센터링을 구현하는 방법을 주로 공유합니다. CSS 코드는 간단하고 이해하기 쉽고, 참조 가치가 있으며, 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
p 센터링의 구현 코드를 공유하겠습니다. 구체적인 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
</style>
<p class="p1">
<p class="p2">
</p>
</p>
</body>
</html>
위의 두 ps를 사용하면 p1
1을 중심으로 p2가 표시됩니다. p1 너비에서 p2의 너비를 뺀 값은 p2margin-left의 값입니다: (100-40)/2=30
p1의 높이에서 p2의 높이를 뺀 값은 p2margin-top의 값입니다: (100-40)/ 2=30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p22{
margin-left: 30px;margin-top: 30px;
}
</style>
<p class="p1">
<p class="p2 p22">
</p>
</p>
</body>
</html>
2. 방법 2
CSS의 position 속성을 사용하여 p1을 기준으로 p2의 위쪽과 왼쪽을 50%로 설정한 다음 margin-top을 사용하여 p의 음수 절반으로 설정합니다. 뒤로 당기려면 p2의 높이를 사용하세요. Marg-left를 너비의 음수 절반으로 설정하고 뒤로 가져옵니다. CSS는 다음과 같이 설정됩니다. CSS, 다음과 같이 html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
four, 방법 4
Utilize css3의 새로운 속성 table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
position: relative;
}
.p22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
이 방법의 또 다른 장점은 p2의 높이를 고정할 필요가 없다는 것입니다. 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.p1{ width: 100px; height: 100px; border: 1px solid #000000;}
.p2{ width:40px ; height: 40px; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
관련 추천: 
html에서 div의 센터링에 주의해야 합니다.
위 내용은 DIV 센터링을 달성하는 세 가지 CSS 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.