css实现高度不定图片垂直居中
在开发中经常遇到需要将不定高度的图片垂直居中的情况，尤其电商网站，图片很多，宽高比例不一定。如果想要整齐地显示在网站上就需要将图片水平和垂直两个方向都居中对齐，水平方向对齐很好实现，那么垂直居中怎样实现呢？以下的方法是用css实现的，很简单：html代码：
css代码：
【css实现高度不定图片垂直居中】.imgBox{margin:100pxauto;
background:#040303;
width:500px;
height:500px;
font-size:0;
text-align: center;
}.imgBoximg{margin:0auto;
vertical-align: middle;
width:300px;
height:300px;
}.imgBox:after{display: inline-block;
width:0;
height:100%;
content:"center";
vertical-align: middle;
overflow: hidden;
}
效果如下图所示，img标签不能设置display:block;
否则会失效。ie8及以上是可以兼容的，ie7下无法实现。当然用js可以实现不定高度垂直居中，如果不需要兼容ie7的话用css是很方便的。
文章图片
css实现高度不定图片垂直居中 | LIDADA 转载自LIDADA http://lidada.org/css-to-achieve-the-height-of-the-vertical-picture-vertical-center/
更多文章请关注LIDADA
推荐阅读
- JS中的各种宽高度定义及其应用
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆