标签：
div相对于父盒子垂直居中的几种方法，之前在网上看到很多种方法，确实说的很对，也很具体，但是我感觉对于初学者来说，一目了然是最重要的，所以，我把很高深的技巧，和很复杂的css样式都剔除掉，旨在让更多人能看懂。
具体事例方法如下：
1. 其实这里的重点是，一定要给父盒子设置相对定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#one{
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative; //重点：必须给父元素设置相对定位
}
#two{
width: 200px;
height: 200px;
background-color: red;
position: absolute; // 给父元素设置相对定位
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<body>
<div id="one">
<div id="two"></div>
</div>
</body>
</html>
2. 不多说规则同上（只有思想不太一样）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#one{
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
#two{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<div id="one">
<div id="two"></div>
<img src="" />
</div>
</body>
</html>
最后说一下 让<img>垂直定位的方法
以下是html结构：
<div id="one">
<div id="two"></div>
<img src="" />
</div>
css样式：
img {
display:table-cell;
text-align:center;
vertical-align:middle;
}
相信很多初学者对display：table-cell不是太了解，下面我说一下：
display:table-cell属性就是让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性
的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。
希望对你有帮助
---不青春
标签：
原文地址：http://www.cnblogs.com/bqc6/p/5944074.html
