本文主要和大家分享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>
如上的兩個p，實作p2在p1裡面是居中顯示
一、方法一
利用margin，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>
#二、方法二
# 利用css的position屬性，把p2相對於p1的top、left都設定為50%，然後再用margin-top設定為p2的高度的負一半拉回來，用marg-left設定為寬度的負一半拉回來，css如下設定
<!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>
三、方法三
還是用css的position屬性，如下的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;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
</p>
</p>
</body>
</html>
四、方法四
利用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{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</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 ; background-color: green;}
.p11{
display: table-cell;vertical-align: middle;
}
.p22{
margin: auto;
}
</style>
<p class="p1 p11">
<p class="p2 p22">
p居中方法
</p>
</p>
</body>
</html>
#相關建議：
以上是三種css方法實現DIV居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
