让图片垂直居中的方式

一、flex布局
flex布局较适用于移动端的布局

//图片垂直居中
display:flex;
align-items:center

我一般在写小程序，app时会使用这种方式

二、采用定位的方式
这种方式相对于pc端兼容性很好

<div class="fatherimg"><img src="../images/a.png" class="img" />
</div>
.fatherimg{width:300px;height:400px;position:relative;
}
.fatherimg img{positions:absolute;top:50%;left:50%;transform:translate(-50%,-50%;);
}

如果想让图片自适应,下面这种方式挺适用的，前段时间在写响应式网站时感觉很方便

.fatherimg img{display: inline-block;max-width: 100%;height: auto;
}

三、display:table

<div class="fatherimg"><div class="img"><img src="../images/a.png" /></div>
</div>
.fatherimg{width:300px;height:400px;display:table;
}
.fatherimg .img{display:table-cell;vertical-align:middle;
}
.fatherimg .img img{width:200px;height:200px;
}

让图片垂直居中的方式相关推荐

设置图片垂直居中line-height和vertical-align的区别
设置图片水平居中line-height和vertical-align的区别先看一个案例:目的是使图片相对于模块垂直居中 <!DOCTYPE html> <html lang=&qu ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...
网页中如何将文字和图片垂直居中
网页中如何将文字和图片垂直居中如果在进行网页编写的过程中,发现无论如何调整文字的CSS代码都无法将其垂直居中,这时我们就需要考虑是不是其他元素没有居中导致的视觉误差,这里记录一次由于图片没有垂直居中 ...
CSS 图片垂直居中的解决办法
文章参考让html img图片垂直居中的三种方法 flex的align-items: center; <div class="duty-header__label"> ...
背景属性：背景颜色、背景图片、背景图片平铺方式、背景图片定位、背景属性复合写法
背景属性 1.背景颜色背景颜色应用于:内容区内间距区边框区颜色表现方式:颜色英语单词16进制代码 #rgb(0,0,0) 0-255 .box {width: 200px;height: ...
css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中行内元素html结构 <div ...
position属性及实现图片垂直居中
转自: http://blog.onlygrape.com/position/186 定义 position 属性把元素放置到一个静态的.相对的.绝对的.或固定的位置中. span>positi ...
iOS 正确选择图片加载方式
正确选择图片加载方式能够对内存优化起到很大的作用,常见的图片加载方式有下面三种: //方法1 UIImage *imag1 = [UIImage imageNamed:@"image.png ...
不一样的图片加载方式
在浏览网页的过程中,图片最容易吸引用户的注意力,它即能给用户直观感受,又能清晰地表达意图,所以在制作网页时,如何快速有效地加载图片资源显得尤为重要. 常见的图片加载方式一般而言,最常见的图片加载方式 ...

让图片垂直居中的方式

让图片垂直居中的方式相关推荐

最新文章

热门文章