图片 + 未知宽高 + 垂直居中
第一种: table-cell / inline-block + vertical-align
条件: 容器宽高受图片默认宽高影响
html结构:
<div>
<img src="./image.jpg" alt="">
</div>
css代码:
div {
display: inline-block;
/*display: table-cell;*/
padding: 10px;
border: 2px solid #aaa;
}
img {
vertical-align: middle;
}
关键点:
display:inline-block
:使得容器(即<div>
)的宽度和高度随图片大小改变vertical-align: middle
:使得图片在容器内部垂直居中inline-block
和table-cell
实现起来有区别,前者中容器的大小与这个容器内的图片大小有关,后者中容器的长度与这个容器内图片的长度有关,容器的高度与那一行中所有容器内图片高度的最大值有关
第二种:“隐藏物体” + vertical-align
条件: 容器宽高已知且大于图片默认宽高
html结构:
<div class="container">
<img src="./image.jpg" alt="">
<span class="hidden"></span>
</div>
css代码:
.container {
width: 800px;
height: 600px;
border: 2px solid #ddd;
text-align: center;
}
img {
vertical-align: middle;
}
.hidden {
height: 100%;
width: 0;
vertical-align: middle;
display: inline-block;
}
关键点:
.hidden元素以
height:100%
伸张自容器(即.container)顶部到容器底部,以width:0
加以隐藏<img>的
vertical-align:middle
和.hidden的vertical-align:middle
规定<img>元素和.hidden元素必须根据双方的中部对齐排列
第三种:透明.gif + background-image:url(‘./图片.jpg’)
条件: 容器宽高已知且决定图片宽高
'transparent.gif': 透明的gif格式图片;
'background-image': 需要展示的图片;
html结构:
<li>
<img src="./transparent.gif" alt="">
</li>
css代码:
li {
list-style: none;
width: 256px;
height: 256px;
padding: 20px;
border: 2px solid #ddd;
}
img{
width: 100%;
height: 100%;
display: block;
background-position: center;
background-image: url('./image.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
关键点:
transparent.gif :透明,使得背景图片成为展示图片
background-position: center
:使得背景图片在容器(即<img>
)中垂直居中