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. README.md 编写

    Spring Boot Demo =========================== 该文件用来测试和展示书写README的各种markdown语法.GitHub的markdown语法在标准的ma ...

  2. js短信验证码

    短信验证码,无注释,url顺便写的错的,所以会报错 <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  3. Windows下Python安装: requires numpy+mkl 和ImportError: cannot import name NUMPY_MKL

    最近写了一篇关于“微软开源分布式高性能GB框架LightGBM安装使用”的文章,有小伙伴安装Python环境遇到了问题.我个人也尝试安装了一下,确实遇到了很多问题."Windows7下pyt ...

  4. web-day9

    第9章WEB09-Servlet篇 今日任务 完成系统的登录的功能 完成登录系统后页面定时跳转 记录系统登录成功后,系统被访问多少次 教学导航 教学目标 了解HTTP协议 掌握Servlet的编写 了 ...

  5. 团队项目之UML图设计---WeEdit

    团队信息: 学号: 姓名: 本次博客链接: 041602209 黄毓明(临时队长)  https://www.cnblogs.com/mingsonic/p/9820702.html 06160023 ...

  6. QT5.4.0安装以及与VS2010整合安装---64bit操作系统解决方案

    QT5.4.0安装以及与VS2010整合安装---64bit操作系统解决方案 注意,目前QT官网不能下载,必须提供注册,然后才可以下载. 网上不同版本安装的细节有差异,特将我的安装相关操作贴出来,希望 ...

  7. Ajax_Json

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxJson ...

  8. Scala_类

    类 简单类 最简单的类的定义形式是: class Test1 {  //这里定义类的字段和方法} 可以使用new关键字来生成对象 var test = new Test1() 给类增加字段和方法 Un ...

  9. HDU3506环形石子合并问题

    HDU3506环形石子合并问题 线性的石子合并问题比较好理解,环形的转成线性的方法就是扩展数组 1 2 3 . . . n 1 2 3 ... n 依据是我们最优的取值可以是 1 --- n也能是 2 ...

  10. libgdx游戏中的中文字体工具类

    // ---------全局Font------------ static FreeTypeFontGenerator Generator; static BitmapFont Font; stati ...