html 怎么在div垂直居中
发布网友
发布时间：2022-04-23 22:34
共1个回答
热心网友
时间：2022-04-20 00:34
具体代码如下，可参考：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中 DIV+CSS</title>
<style>
#main {position: absolute;
width:400px;
height:200px;
left:50%;top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F
}
</style>
<body>
<div id="main">DIV水平居中和上下垂直居中</div>
</body>
</html>
这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边框。
水平垂直居中原理介绍：
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。
