實現DIV居中的幾種方法
阿新 • • 發佈：2021-01-11
<div class="div1">
<div class="div2">
</div>
</div>
</body>
一、方法一
利用margin，div1的寬減去div2的寬就是div2margin-left的數值：（100-40）/2=30
div1的高減去div2的高就是div2margin-top的數值：（100-40）/2=30
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;} .div22{ margin-left: 30px;margin-top: 30px; } </style> <div class="div1"> <div class="div2 div22"> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;} .div22{ margin-left: 30px;margin-top: 30px; } </style> <div class="div1"> <div class="div2 div22"> </div> </div> </body> </html>
二、方法二
利用css的 position屬性，把div2相對於div1的top、left都設定為50%，然後再用margin-top設定為div2的高度的負一半拉回來，用marg-left設定為寬度的負一半拉回來，css如下設定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
三、方法三
還是用css的position屬性，如下的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
四、方法四
利用css3的新增屬性table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
這個方法還有一個好處就是，div2的高度可以不固定，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
div居中方法
</div>
</div>
</body>
</html>
