用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中。

代码如下:

<div class="box">
<img src="1.png" alt="">
</div>
 .box{
display: flex; /*容器为伸缩盒*/
align-items: center; /*纵轴方向上的对齐方式设置为居中*/
}
img{
width: 100%;
}

以上是新版伸缩盒实现的,支持安卓4.4+,如果需要兼容安卓4.4-,需要再另外添加旧伸缩盒,如下:

.box{
display: -webkit-box; /*容器为旧伸缩盒*/
-webkit-box-align: center; /*设置旧伸缩盒对齐方式*/
  
display: flex; /*容器为伸缩盒*/
align-items: center; /*纵轴方向上的对齐方式设置为居中*/
}
img{
width: 100%;
}

使用CSS3伸缩盒实现图片垂直居中的更多相关文章

  1. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

  2. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  3. CSS3 伸缩布局盒模型

    CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...

  4. CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南

    在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...

  5. css3 新旧伸缩盒的异同

    由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...

  6. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  7. 深入了解 Flexbox 伸缩盒模型

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...

  8. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  9. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

随机推荐

  1. svn常见问题汇总

    has no ancestry information 经查,由于project/,01Dev/的权限被关闭了,把当前文件夹父目录(project/,01Dev/) 下的 .svn/ 目录删除就好了.

  2. C语言入门(15)——结构体与数据抽象

    大多数的计算机运算是对现实世界的模拟,如果想用计算机来模拟现实世界需要用到数据抽象的方法.所谓抽象是从实际的人.物.事和概念中抽取所关心的共同特征,,忽略非本质的细节,吧这些特征用各种概念精确的加以描 ...

  3. mysql允许远程IP访问

    默认情况下Linux内的mysql数据库mysql,user表内的用户权限只是对localhost即本机才能登陆.需要更改权限: mysql> Grant all privileges on * ...

  4. Android UI ActionBar功能-启动ActionBar

    官方帮助文档:http://wear.techbrood.com/training/basics/actionbar/index.html ------------------------------ ...

  5. 【转】C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部

    PS:文末的附件已更新,这次我放到博客园里面了,不会弹出广告,放心下载,O(∩_∩)O谢谢! 这是最近在做的一个项目中提到的需求,把一个现有的窗体应用程序界面嵌入到自己开发的窗体中来,看起来就像自己开 ...

  6. 楼天城楼教主的acm心路历程(作为励志用)

    楼主个人博客:小杰博客 利用假期空暇之时,将这几年GCJ,ACM,TopCoder 參加的一些重要比赛作个 回顾.昨天是GCJ2006 的回顾,今天时间上更早一些吧,我如今还清晰记得3 年 前,我刚刚 ...

  7. cocos2D(九)---- CCAction

    之前介绍CCNode的时候说过,动作是指在特定时间内完毕移动.缩放.旋转等操作的行为,节点能够通过执行动作来实现动画效果,这里的动作就是指CCAction对象,它有非常多的子类,每一个子类都封装了不同 ...

  8. 用程序对hdfs进行操作。

    调试加安装了半天,怎么也没有配置好怎么通过Eclipse直接连接hdfs,最后我还是打成一个jar包放到Linux虚拟机中运行的. 运行命令Java -jar  XXX.jar. 当中对hdfs的操作 ...

  9. 使用win8时删除自带的输入法的好方法

    无直接把那个语言都删了,再直接装输入法就行了.

  10. HTML行类元素与块级元素

    在html中大部分标签都可以分为行类与块级元素,其中两者的区别是块级元素会自动换行,可设置高度与宽度:而行类元素则是连着一行写,可设置高度但是不能设置宽度. html中行类元素: a - 锚点abbr ...