用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. docker导入本地镜像

    -rw-r--r-- 1 root root 98954220 Mar 17 17:02 centos-6-x86.tar.gz 利用下载的包 创建镜像: cat centos-6-x86.tar.g ...

  2. 通过属性集名称获取属性集id

    Mage::getModel('eav/entity_attribute_set')->load('属性集名称', 'attribute_set_name')->getAttributeS ...

  3. UNIX网络编程---传输层:TCP、UDP、SCTP(二)

    UNIX网络编程----传输层:TCP.UDP.SCTP 一.概述 本章的焦点是传输层:包括TCP.UDP.和SCTP(流控制传输协议).SCTP是一个较新的协议,最初设计用于跨因特网传输电话信令. ...

  4. auto_ptr 要点解析

    今天看了auto_ptr类的用法,又仔细看了看C++标准库中的符合标准的auto_ptr类别的实作,觉得自己基本上理解了auto_ptr的原理,下面就我的心得写几句,有不正确的地方,希望多多指教. 1 ...

  5. ADT Example

    Example Data Types: Integer, and Character Example (Integer Data Type) The integer data type can con ...

  6. 改动分区后,导致linux上不了

    /*************************** *Author : 林旭东    *problem:基于分区改动出现的问题(1) *calender: 15/07/10   ******** ...

  7. Temporary Post Used For Theme Detection (19f70e1d-5d8d-4c19-aef1-5b5a71ae0c47 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    This is a temporary post that was not deleted. Please delete this manually. (90462755-633b-4a0e-abb7 ...

  8. Serializable接口的背后

    序列化是什么? 序列化就是将一个对象的状态(各个属性量)保存起来,然后在适当的时候再获得.序列化分为两大部分:序列化和反序列化. 序列化是这个过程的第一部分,将数据分解成字节流,以便存储在文件中或在网 ...

  9. AssetBundle的使用

    using UnityEngine; using System.Collections; using UnityEditor; using System.IO; public class Editor ...

  10. 浅谈C中的指针和数组(五)

    前面写了一些C指针和数组的一些知识,但是还有一些很重要的知识没有交代,这里做一个补充. 首先看一下,普通变量(指针也是变量)和数组名查看地址的方式是不同的. 查看数组变量的地址,不需要使用 & ...