一直以来都没有找到一种完美解决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. C语言redirection

    1)把执行文件xxx.exe 和读取的文件yyy.txt放在一个地方 2)用dos 命令 dir 和cd,打开存放文件的文件夹 3)window 7 情况下 输入xxx.exe < yyy.tx ...

  2. /cdrom /media /mnt

    /media : Mount point for removeable media Purpose This directory contains subdirectories which are u ...

  3. Java 最简单的计算器——使用Args参数

    public class Test{ public static void main(String[] args){ if(args.length<3){ System.out.println( ...

  4. ImageOptim 图片压缩工具

    下载地址:http://www.onlinedown.net/soft/175501.htm 下载地址(官网):http://imageoptim.com ​ ImageOptim 图片压缩工具,能够 ...

  5. leetcode 151. Reverse Words in a String --------- java

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  6. JavaWeb学习记录总结（二十九）--Servlet\Session\Cookie\Filter实现自动登录和记住密码

    一.Servlet package autologin.servlet.login; import java.io.IOException;import java.security.MessageDi ...

  7. php parse_url 函数教程

    [导读] php parse_url 函数教程parse_url ( PHP 4中, PHP 5中) parse_url -解析URL并返回其组成部分 描述 混合parse_url (字符串$网址[摘 ...

  8. timus 1210 Kind Spirits(最短路)（动态规划）

    Kind Spirits Time limit: 1.0 secondMemory limit: 64 MB Ivanushka the Fool lives at the planet of 0-l ...

  9. P235 实战练习（集合类2）、摇奖程序和验证码（修改版）

    1.分别向Set集合以及List集合中添加“A”.“a”.“c”.“C”.“a”5个元素,观察重复值“a”能否在List集合以及Set集合中成功添加. package org.hanqi.practi ...

  10. ZOJ-3933 Team Formation （二分图最佳完美匹配）

    题目大意:n个人,分为两个阵营.现在要组成由若干支队伍,每支队伍由两个人组成并且这两个人必须来自不同的阵营.同时,每个人都有m个厌恶的对象,并且厌恶是相互的.相互厌恶的人不能组成一支队伍.问最多能组成 ...