1.
.box{
display:table-cell;
vertical-align: middle;
text-align: center;
/* 针对IE的Hack */
*display:block;
*font-size:175px; /*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border:1px solid #000;
}
.box img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
vertical-align: middle;
}
<div class="box"><img src="https://static.oschina.net/uploads/user/1460/2921778_100.jpeg?t=1487574295000" /></div>
2.
.box{
display:table-cell;
vertical-align: middle;
text-align: center;
/* 针对IE的Hack */
*display:block;
*font-size:175px; /*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border:1px solid #000;
}
.box span{
display:table;
vertical-align:middle;
}
.box img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
vertical-align: middle;
}
<div class="box"><span><img src="https://static.oschina.net/uploads/user/1460/2921778_100.jpeg?t=1487574295000" /></span></div>
3.移动端可以使用
.box {
width:200px;
height:200px;
border:1px solid #000;
}
.box img{
position: relative;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
4.作为背景方法
.box {
width:200px;
display:table-cell;
height:200px;
text-align:center;
vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
vertical-align:middle
}
.box img {
vertical-align:middle;
}
<div class="box"><i></i><img src="https://static.oschina.net/uploads/user/1460/2921778_100.jpeg?t=1487574295000" /></div>