div水平居中很容易，設(shè)置css樣式 text-align: center; 就可以了。
垂直居中也有個(gè)屬性 vertical-align: middle; 這個(gè)屬性普通設(shè)置是沒(méi)有效果的。
第一種方法：通過(guò)一個(gè)空白圖片可以達(dá)到垂直居中的效果。
<html>
<style>
#image{
width:500px;
height:500px;
background:#fff000;
text-align: center;
overflow: hidden;
}
#image img {
vertical-align: middle;
}
#block {
width: 0px;
height: 100%;
}
</style>
<body>
<div id="image">
<img src="http://www."/>
<img src="" id="block"/>
</div>
</body>
</html>
個(gè)人覺(jué)得vertical-align: middle 是相對(duì)于左邊的高度垂直居中的，我給左邊一個(gè)填滿div的圖片，就可以實(shí)現(xiàn)垂直居中了。
第二種方法：往div里面加表格。
<html>
<style>
#a {
background: #fff000;
width: 500px;
height: 500px;
overflow: hidden;
text-align: center;
}
</style>
<body>
<div id="a">
<table width="100%" height="100%">
<tr>
<td align="center">
<img src="http://" />
</td>
</tr>
</table>
</div>
</body>
</html>
在表格里就很容易設(shè)置居中了。
經(jīng)測(cè)試，這兩種做法都沒(méi)有瀏覽器不兼容的問(wèn)題。推薦用第一種方法。
另外，說(shuō)一下overflow: hidden; 這個(gè)屬性，當(dāng)圖片大小超出div的大小時(shí)，會(huì)影藏超出的部分。不設(shè)置的話，圖片會(huì)全部顯示，覆蓋在div上。
更多關(guān)于網(wǎng)站建設(shè)方面的知識(shí)歡迎來(lái)我們
海東科技大家一起探討。
