CSS中如何使父DIV内部的DIV垂直居中对齐！！！！

来源：互联网发布：单片机地址总线编辑：程序博客网时间：2024/05/01 10:28

每次碰到这个问题，真的棘手呢！

父div样式

.parent { width:500px; height:600px; position:relative }

子div样式

.child { width:200px; height:300px;position:absolute; left:50%;top:50%;margin:-100px 0 0 -100px }

注意：其中父div 样式：position:relative 子div样式：position:absolute; 子div样式中，margin-left=(负数)子div宽度/2 ； margin-top=(负数)子div高度/2

附完整测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内部DIV相对于外部DIV垂直居中</title>
<style type="text/css">
body { margin:0px; font-size: 9pt; }
.parent { width:500px; height:600px; position:relative;background:red; border:soild 1px #39F;}
.child { width:200px; height:300px;position:absolute; left:50%;top:50%;margin:-150px 0 0 -100px ;background:green;border:soild 1px #39F }
</style>
</head>
<body>
<div class="parent">
<div class="child">子div</div>
</div>
</body>
</html>

更多可以参考：http://bbs.blueidea.com/thread-2727214-1-1.html

0 0