一直以来都没有找到一种完美解决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. web app 的技术参考 -- 来自 【百度移动建站指南】

    优化页面性能 考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间.  下面的内容来自百度,然后我自己做了笔记.另外可参考这个系列的文章 ...

  2. git不能提交jar的设置

      项目目录下 文件:.gitignore ,里面设置: *.class # Package Files # *.jar *.war *.ear 删除*.jar

  3. ~0u >> 1

    ~ 逐位求反u 后辍为 定义unsigned类型>>右移如在32系统中,连起来就是 将32位的0取反后 右移一位.也就是 int 的最大值 2147482347

  4. Sprint第二个冲刺（第七天）

    一.Sprint 计划会议: 现在简单的说下今天的会议情况:组员们除了完善之前做的功能,还打算实现把轮播图迁移到一个fragment中,方便管理.现在也准备着手实现商家上传商品的图片这个功能,虽说现在 ...

  5. js 小数取整的函数

    1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4, ...

  6. IntelliJ IDEA 开发前的设置

    1.IntelliJ IDEA 显示行号方法 设置方法:File->Settings->Editor->General->Appearance->Show line nu ...

  7. 账户切换[转自vbird]

    我们都是使用一般账号登陆系统的,等有需要进行系统维护或软件升级时才转为 root 的身份来动作. 那如何让一般使用者转变身份成为 root 呢?主要有两种方式喔: 以『 su - 』直接将身份变成 r ...

  8. bootstrap 固定底部导航自适应

    在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖 自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...

  9. NETMON& Message Analyzer

    NMCap /network * /capture  /file c:\folder\t.chn:1MB NMCap /network * /capture (IPv4.SourceAddress = ...

  10. H2 database 行相加-行列转换

    create or replace view view_acceptCompanyasselect *  from  (select WARNIGID,max(CASEWHEN(zhtablename ...