效果圖
TIM截圖20170724105801.png
方法有很多很多很多很多種席爽,在這介紹兩種:
1. 將圖片容器轉為表格單元格:**table : table-cell **
- html
<div class="box">
<img scr="your image">
</div>
- css
.box {
width: 400px;
height: 400px;
border:1px solid #eee;
display: table-cell; /* 將容器轉為表格單元 */
vertical-align: middle; /* 設置容器垂直對齊方式梆惯,居中 */
text-align: center;
/* 兼容ie7 */
*display: block;
*font-size: 349px; /* 400 x 0.873 (為什么是0.873役纹,我猜...) */
*font-family: Arial;
background: #d5d5d5;
}
.box img {
vertical-align: middle;
}
2. 將圖片設置為圖片容器的背景圖將圖片定位屬性設置為center
background:url(your image) center no-repeat