一直以来都没有找到一种完美解决DIV垂直居中的方法，今天终于找到了，特记录如下，从此不再用table来居中了。^^

 <html>

     <style>

     #image{

         width:500px;

         height:500px;

         background:#fff000;

         text-align: center;

         overflow: hidden;

     }

     #image img {

 　　　　vertical-align: middle;

 　　 }

     #block {

         width: 0px;

         height: 100%;

     }

     </style>

     <body>

         <div id="image">

             <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>

              <img src="" id="block"/>

         </div>

     </body>

 </html>

DIV的垂直居中的更多相关文章

  1. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  2. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  3. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  4. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  5. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  6. DIV内容垂直居中

    css垂直居中属性设置vertical-align: middle对div不起作用,例如: <!DOCTYPE html> <html lang="zh-CN"& ...

  7. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  8. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  9. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  10. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

随机推荐

  1. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  2. Note Pad++ 关闭语法错误时在代码下面的红线标识

    菜单栏 —- 插件 —- DSpellCheck . 将勾去掉即可

  3. GPIO模拟IIC接口信号质量分析

    信号质量有问题的波形001: 信号质量有问题的波形002: 从上图可以看出,GPIO口模拟的I2C接口,电平都存在半高的情况. 因为I2C的接口是通过GPIO模拟实现的,该时钟信号线SCL内部默认为下 ...

  4. 面向过程部分 Java 和 C++ 的区别

    前言 Java 和 C++ 在面向过程部分区别并不大,但还是有的,本文罗列了这些区别. 在 Java 中: 1. 数据类型的范围和机器无关 2. 加上前缀 0b 可以表示二进制数,如 0b1001 就 ...

  5. UVa 10810 - Ultra-QuickSort

    题目大意:给出一个数列,每次交换相邻数字,求排成递增序的最少交换次数. 分析:求逆序数,合并排序 #include<cstdio>#include<cstring>#inclu ...

  6. 灰度图像的自动阈值分割（Otsu 法）（转载）

    灰度图像的自动阈值分割(Otsu 法) 机器视觉领域许多算法都要求先对图像进行二值化.这种二值化操作阈值的选取非常重要.阈值选取的不合适,可能得到的结果就毫无用处.今天就来讲讲一种自动计算阈值的方法. ...

  7. Deep Learning论文笔记之（四）CNN卷积神经网络推导和实现（转）

    Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文, ...

  8. 工作中遇到的问题--JPA 一对多查询

    /**     *  order by gs.updateDate desc          *  SELECT gs FROM GoodStatus gs WHERE gs IN(     * @ ...

  9. poj1502 最短路

    题意:有n个处理器,给出n*n的邻接矩阵的一半,表示相互之间传输信息的花费(另一半与给出的一半对称,即双向都可传输),x表示不能传输,问从第一个处理器传输到所有处理器的最小花费总和是多少. 就是跑一遍 ...

  10. kuangbin_ShortPath O (LightOJ 1074)

    这是什么鬼OJ啊都没见过害的我还交错语言CE了一发摔 想着懒得重写了直接把上一题的dij改了改就交了 然后RE 反应过来这题有负环 想着怎么标记负环同时不直接结束spfa 看了别人的代码感叹了一下我还 ...