1、行高 == 高度:已知图片的高宽

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</div>

2、display:table display:table-cell:不兼容IE6/IE7

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; "><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></span>
</div>

3、绝对定位:已知图片的高宽

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

4、flex布局:h5端可用

<style type="text/css">
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
} .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
box-sizing: border-box
} .ui-flex.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.ui-flex.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
</style> <div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
<div class="cell">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
</div>
</div>

css实现图片垂直居中的更多相关文章

  1. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  2. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  3. CSS让图片垂直居中的几种技巧 三种方法介绍

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  4. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

  5. 使用CSS3伸缩盒实现图片垂直居中

    用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...

  6. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  7. CSS中如何实现未知尺寸图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...

  8. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  9. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

随机推荐

  1. UVaLive 3357 Pinary (Fib数列+递归)

    题意:求第 k 个不含前导 0 和连续 1 的二进制串. 析:1,10,100,101,1000,...很容易发现长度为 i 的二进制串的个数正好就是Fib数列的第 i 个数,因为第 i 个也有子问题 ...

  2. c#+web下载文件夹

    最近公司在做工程项目,实现文件夹下载. 网上找了很久,发现网上的代码都有相似的问题,不过最终还是让我找到了一个符合的项目. 工程: 进行项目文件夹下载功能分析,弄清楚文件夹下载的原理,提供的数据支持. ...

  3. (转)Log4Net 全方位跟踪程序运行

    转自:http://www.cnblogs.com/qingyuan/archive/2011/05/13/2045616.html 前端日子自己写了一个简单的日志跟踪程序,现在目前正在做的一个项目中 ...

  4. Using Spring.net in console application

    Download Spring.net in http://www.springframework.net/ Install Spring.NET.exe Create a console appli ...

  5. concurrent.future

    concurrent.future module provides a high-level interface for asynchronously executing callables. Bas ...

  6. Android-Java-面向对象与面向过程举例

    例子一: 面向过程 在生活中的体现: 李四去饭店吃饭,进入风华高档餐饮店后,首先不理服务员,然后冲进厨房,推开厨师,自己开煤气,自己切菜,自己炒菜,自己调料,炒好后自己端出来,然后吃,吃完后 买单 面 ...

  7. Spring Security ——AuthenticationProvider

    AuthenticationProvider 目录 1.1     用户信息从数据库获取 1.1.1    使用jdbc-user-service获取 1.1.2    直接使用JdbcDaoImpl ...

  8. 实验4 IIC通讯与EEPROM接口

    1.       用C语言编程,利用定时器产生一个0~99秒变化的秒表,并且显示在数码管上,每过一秒将这个变化写入实验板上AT24C02,当关闭实验板电源,并再次打开实验板电源时,单片机从AT24C0 ...

  9. 【抄袭】VB.NET扩展WebBrowser,拥有跳转前获取URL的能力

    来自 http://www.cnblogs.com/yuanjw/archive/2009/02/09/1386789.html 我仅做VB化,并优化了事件消息 Imports System.Comp ...

  10. Page_Load是怎样被执行的

    关于Asp.Net的生命周期的文章,很多很多,不管是管道生命周期,还是页面生命周期,图文并茂的文章并不少,我就不说了,我只是在复习这些知识点的时候,想具体知道一个页面的Page_Load方法到底是怎么 ...