body结构

<body>

    <div>

        <img src="1.jpg" alt="haha">

    </div>

</body>

方法一： 
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

<style type="text/css">

    *{margin: 0;padding: 0;}

    div{

        width:150px;

        height: 100px;

        display: table-cell;

        vertical-align: middle;

        text-align: center;

        border:1px solid #000;

    }

    img {

        width: 50px;

        height: 50px;

    }

</style>

结果如下图所示： 

方法二： 
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

<style type="text/css">

    *{margin: 0;padding:0;}

    div{

        width:150px;

        height: 100px;

        position: relative;

        border:1px solid #000;

    }

    img {

        width: 50px;

        height: 50px;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-top: -25px; /* 高度的一半 */

        margin-left: -25px; /* 宽度的一半 */

    }

</style>

结果如下图所示： 

实现div里的img图片水平垂直居中的更多相关文章

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

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

  2. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  5. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  6. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  7. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  8. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  9. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

随机推荐

  1. 006.Docker网络管理

    一 docker网络模式 Docker使用Linux的Namespaces技术来进行资源隔离,如PID Namespace隔离进程,Mount Namespace隔离文件系统,Network Name ...

  2. 不一样的go语言-不同的语法之type

    前言   在go语言中,type用于类型定义(type definition)与类型别名(type alias).这两者的差别从名字上已经可以初见端倪.   类型定义即定义新类型,是一个全新的类型,但 ...

  3. Consul服务器配置

    微服务带来最大的好处就是把整个大项目分割成不同的服务,运行在不同服务器上,实现解耦和分布式处理.微服务虽然有很多好处,但是也会有不好的一方面.任何事物都会有两面性,在微服务里面运维会是一个很大的难题, ...

  4. C# DataTable分页函数

    /// <summary> /// 对DataTable进行分页,起始页为1 /// </summary> /// <param name="dt"& ...

  5. NTFS的交换数据流ADS应用

    NTFS的交换数据流ADS应用   NTFS是Windows常用的文件系统格式.该格式支持交换数据流(Alternate Data Streams,缩写ADS)特性.该特性可以让多个文件流使用同一个文 ...

  6. Python图形编程探索系列-09-tkinter与matplotlib结合案例

    案例1 案例来自于:https://bbs.csdn.net/topics/390326088 代码示例: import matplotlib matplotlib.use('TkAgg') from ...

  7. j2me必备之网络开发数据处理

    第9章 无线网络开发MIDP提供了一组通用的网络开发接口,用来针对不同的无线网络应用可以采取不同的开发接口.基于CLDC的网络支持是由统一网络连接框架(Generic Connection Frame ...

  8. 2D Tookit简单教程

    1. 在Project Window中点击Create > tk2d > Sprite Collection”点击Sprite Collection,创建一个Sprite Collecti ...

  9. [Android Pro] https://blog.csdn.net/gaugamela/article/details/79143309

    原文地址:https://blog.csdn.net/gaugamela/article/details/79143309 最近遇到这样一个问题: 第三方的SDK除了Jar包外,还提供了对应的so文件 ...

  10. HTML5 background-color和background-image问题共用问题

    在HTML5中支持背景图片和背景颜色在一个标签中同时渲染. 一般的需求是为元素指定背景颜色,然后在背景色的商品绘制背景图. 支持:Google,FF,IE9以上浏览器. 基本原则:先设置背景图片,再指 ...