一直以来都没有找到一种完美解决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. win7共享wifi

    已管理员身份打开 命令提示符 netsh wlan set hostednetwork mode=allow ssid=abcde key=123456 netsh wlan start hosted ...

  2. centos 主从复制

    1.主服务器rpm安装mysql 2.复制一台服务器叫slave(从服务器),一会儿要用 3.在主服务器,修改my.cnf文件 找到server-id,在它的下面加上 binlog-do-db = h ...

  3. HDU 4599 概率DP

    先推出F(n)的公式: 设dp[i]为已经投出连续i个相同的点数平均还要都多少次才能到达目标状态. 则有递推式dp[i] = 1/6*(1+dp[i+1]) + 5/6*(1+dp[1]).考虑当前这 ...

  4. c#部分---网吧充值系统；简易的闹钟；出租车计费；简单计算器；对战游戏；等额本金法计算贷款还款利息等；随机生成10个不重复的50以内的整数；推箱子；

    网吧充值系统namespace ConsoleApplication1 { class Program { struct huiyuan { public string name; public st ...

  5. leetcode 103 Binary Tree Zigzag Level Order Traversal ----- java

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  6. POJ 1469 COURSES(二部图匹配)

                                                                     COURSES Time Limit: 1000MS   Memory ...

  7. ARM1138@库函数速查

    1. GPIO库函数 可实现的功能: 获得/设置指定管脚的方向(输入.输出)和模式(硬件控制) 获取/设置指定管脚的配置(驱动强度2/4/8/8_SCmA.管脚模式:推挽(弱上拉/弱下拉)/开漏(弱上 ...

  8. 【转】iOS websocket 及时通讯实现

    原文网址:http://blog.csdn.net/manyxh/article/details/48196209 2015-09-03 by 木易哥哥 开发一个类似QQ.微信的即时IM聊天功能,做到 ...

  9. OSGi 的由来和本质特性

    OSGi 的由来 随着科技和需求的发展和变化,现在的软件变得越来越庞大.这样,随之而来的最大挑战就是软件在设计上的越来越复杂和维护上的越来越困难.为了解决这个问题,软件架构师将软件切分成比较小的并且易 ...

  10. background-position 用法详细介绍

    语法: background-position : length || length background-position : position || position 取值: length  : ...