Ø 前言
写 html + css 时，img 标签的垂直与水平居中，应该是很常见的设计。实现的方式很多，但是容易遗忘，下面分别整理了几种实现方式。
1. css 代码
<style type="text/css">
p, img{
margin: 0px;
}
#div1{
width: 600px;
/*border: 1px solid blue;*/
margin: 0px auto;
}
.interior{
width: 100%;
height: 120px;
border: 1px solid purple;
margin-bottom: 5px;
}
.interior img{
width: 100px;
height: 100px;
border: 1px solid orange;
}
#div1_1{
text-align: center;
line-height: 118px;
}
#div1_1 img{
display: inline-block;
vertical-align: middle;
}
#div1_2{
text-align: center;
display: table;
}
#div1_2 span{
display: table-cell;
vertical-align: middle;
}
#div1_3{
position: relative;
text-align: center;
}
#div1_3 img{
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
#div1_4 {
text-align: center;
}
#div1_4 img {
position: relative;
top: 9px;
}
</style>
2. html 代码
<div >