一直以来都没有找到一种完美解决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. 不要在类的函数中使用static字段

    昨天在做存储服务的压力测试,后台是采用多线程根据玩家唯一标识做线程划分的,在测试的过程中发现,进行存储的时候,会发生玩家数据错乱的情况. 一开始怀疑是上层逻辑在处理数据的时候发生了错乱,导致保存的时候 ...

  2. Hooks

    function getValType(elem) { var ret = elem.tagName.toLowerCase() return ret === "input" &a ...

  3. Wamp安装使用+Git for Windows

    相信很多朋友都曾在windows上做过web开发,我们常用的Web应用程序平台是:Apache+Mysql+Perl/PHP/Python,在windows下集成称为WAMP.web开发新手有时候由于 ...

  4. CGI实现页面的动态生成

    传统的Web应用开发局限于有限的静态页面(HTML静态页面),不利于系统的扩展,不能提供及时信息,而且修改维护麻烦,所以建立一个动态Web应用程序尤为重要.一方面根据访问者的不同请求返回不同的访问信息 ...

  5. 使用BitTorrent-Sync实现双机文件双向同步

    BitTorrent-Sync是一款基于P2P的分布式文件同步工具,简称btsync,非开源软件但免费使用.本文使用btsync实现两台服务器上的软件双向同步. 安装 直接从官网下载相应的安装包,为了 ...

  6. 图像处理之image stitching

    背景介绍 图像拼接是一项应用广泛的图像处理技术.根据特征点的相互匹配,可以将多张小视角的图像拼接成为一张大视角的图像,在广角照片合成.卫星照片处理.医学图像处理等领域都有应用.早期的图像拼接主要是运用 ...

  7. 设置只为View加一条边框，子视图大小超出父视图大小，边框在子视图下边显示

    #import "ViewController.h" @interface ViewController () @property (strong,nonatomic) UIVie ...

  8. install kinect driver for ARM---38

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ The video describes connecting a Microsoft Kinect to ...

  9. 理解ros服务和参数 ---- 7

    原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/  周学伟 Description: 本教程介绍了ROS 服务和参数的知识,以及命令行工具rosservi ...

  10. html部分---通用标签与属性；

    body的属性: bgcolor页面背景色:text文字颜色:topmargin上页边距:leftmargin左页边距:rightmargin右页边距:bottomargin下页边距: src是引用过 ...