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="" alt=""/>
</div>
</body>
</html>
最后說一下 讓<img>垂直定位的方法
以下是html結構：
<div id="one">
<div id="two"></div>
<img src="" alt=""/>
</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屬性在實際項目中的應用。
希望對你有幫助
---不青春