最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示

我没有用table布局，而是用了div+css，找了很久,终于在网上找到解决方案,特此记录备用

关键核心代码如下:

<div style="width:400px;height:400px;border:1px solid red;display:table-cell;">
    <img src="01.jpg" style="vertical-align:middle;" />   
</div>

不要问我为什么，因为我也不明白为什么!哈哈哈，也希望哪一位大神可以帮我解开心里的问题

关于div中图片水平垂直居中的问题的更多相关文章

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

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

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

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

  3. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

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

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

  5. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  6. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

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

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

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

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

  9. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

随机推荐

  1. GEF入门笔记

    最近项目中需要用到Eclipse GEF框架进行画图,故将平时学习笔记更新到博客中,便于查阅 自己画的一个GEF基本结构     最基本流程 1.创建model(包括数据域.在界面中的布局.图片索引等 ...

  2. C# 6.0新加特性

    1.自动属性的增强 1.1.自动属性初始化 (Initializers for auto-properties) C#4.0下的果断实现不了的. C#6.0中自动属性的初始化方式 只要接触过C#的肯定 ...

  3. python第三方模块大杂烩

    Python单元测试框架之pytest---如何执行测试用例 unittest单元测试框架实现参数化 (用例有相似参数断言时使用,可以精简代码) python中标示符作用详解 一篇文章让你彻底搞清楚P ...

  4. 使用QT创建PythonGUI程序

    1. 挑选 GUI设计程序: wxPython Vs. pyQt4 参考链接:http://www.douban.com/group/topic/14590751/ (1):wxWidgets wxP ...

  5. （转）RabbitMQ学习之spring整合发送异步消息(注解实现)

    http://blog.csdn.net/zhu_tianwei/article/details/40919249 实现使用Exchange类型为DirectExchange. routingkey的 ...

  6. MindManager 2019新版上市 ，了解一下！

    所有的等待都是值得的!MindManager在蓄力一年后,给各位思维导图爱好者带来了全新的MindManager 2019 for Windows.全新的版本包含英语.德语.法语.俄语.中文.日语,新 ...

  7. 怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.

    方法一:1 <script type="text/javascript"> $(function() { $("#toggle").click(fu ...

  8. win7不需要密码访问网络共享文件（转载）

    大家是不是觉得,共享一个文件夹后,每次输入密码都很麻烦呢?有没有不需要输入密码就可以访问共享文件的方法呢? 答案是肯定的,当然有,下面介绍下win7不需要密码访问网络共享文件 工具/原料 两台电脑在局 ...

  9. Java根据HttpServletRequest请求获取服务器的IP地址

    以下总结了两种根据HttpServletRequest请求获取发出请求浏览器客户端所在服务器的IP地址方法: 代码: import javax.servlet.http.HttpServletRequ ...

  10. [BZOJ1999] 树网的核 [数据加强版] (树的直径)

    传送门 如果只是想验证算法正确性这里是洛谷数据未加强版 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenet ...