方法一:
- 给容器(父元素)加上
text-align:center;
- 给当前元素转成行内块元素(
display:inline-block;
)再给当前元素加上vertical-align:middle;
- 在当前元素的后面(没有回车)加上同级元素
span
;
并对span
进行vertical-align:middle;width:0;height:100%;display:inline-block
等设置;
垂直对齐方式(vertical-align:top/bottom/middle
}
<style>
*{margin:0;padding:0;}
div{
width:300px;
height:300px;
border:1px solid red;
margin:50px auto;
text-align:center;
}
div img{
vertical-align:middle;
}
div span {
width:0;
height:100%;
vertical-align:middle;
display:inline-block;
}
</style>
<body>
<div>
<img src="pic.png" /><span></span>
</div>
</bosy>
方法二(利用定位):
- 将容器设置为相对定位,
position: relative
- 将图片设置为绝对定位,
position: absolute
- 为图片添加,
left:0;right:0;top:0;bottom:0;margin:auto