<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Demo</title>

    <style type="text/css">

        #outer{

            width:500px;

            height:200px;

            margin: 50px auto;

            border:1px solid #CCC;

            display:table;

            text-align:center;

            #position:relative;

        }

        #middle{

            display:table-cell;

            vertical-align:middle;

            #position:absolute;

            #top:50%;

            #left:50%;

        }

        #inner{

            #position:relative;

            #top:-50%;

            #left:-50%;

        }

    </style>

</head>

<body>

    <div id="outer">

        <div id="middle">

            <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>

        </div>

    </div>

</body>

</html>
原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Demo</title>

    <style type="text/css">

        #outer{

            width:500px;

            height:200px;

            margin: 50px auto;

            border:1px solid #CCC;

            position:relative;

        }

        #inner{

            position:relative;

            left:50%;

            top:50%;

            margin-left:-71px;

            margin-top:-27px;

        }

    </style>

</head>

<body>

    <div id="outer">

            <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>

    </div>

</body>

</html>
用负margin实现，但缺点是要知道居中内容的宽度和高度。

用CSS让未知高度内容垂直方向居中的更多相关文章

  1. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  2. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  3. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  4. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  5. 【笔记】css基于box的一行时垂直方向居中，多行平均居中，多出部分还省略号代替

    题目很长,其实他就是这样的: 看标题,一行的时候是这样的,在行中间 标题文字多的时候是这样的,变成2行,超出部分用省略号: 但是为了更好的兼容性,没有使用flex,使用的是box布局. 核心代码就是这 ...

  6. CSS之未知高度img垂直居中

    测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...

  7. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  8. html如何让label在div中的垂直方向居中显示？

    设置label的行高 line-height 和div的高度一致即可.

  9. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

随机推荐

  1. avalon实现一个简单的带增删改查的成绩单

    自从angular问世,一直就有去了解学习angular,一直想用angular去做一个项目,但无奈,大ng是国外产物,ng1.2版本就只兼容到IE8,1.3后的几个版本提升到IE9,据说NG2.0更 ...

  2. 文件系统：Ext3和Ext4

    一.ext3和ext4的区别: 1.与Ext3兼容:执行若干条命令,就能将Ext3在线迁移到Ext4,而无须重新格式化磁盘或者重新安装系统.原有Ext3数据结构照样保留, Ext4作用于新数据,当然, ...

  3. 语音直播是否真能让国内网红向“Creator”转变？

    2016年,“直播”.“网红”成为了互联网领域最热门的关键词,一时间整个国内市场涌现出了数百家直播平台,而一些视频网站.新闻客户端.社交平台.电商平台等也纷纷推出直播功能.不仅仅只是创业者们像发了疯似 ...

  4. （二）关于ajax那些事

    哈哈,今天突然兴起,想了想自己对ajax的了解,来这里叙述下.心情好,嘿嘿嘿 ajax是一种创建交互式网页应用的网页开发技术.就是在不重新加载页面的情况下,更新部分网页. ajax原理:ajax就是相 ...

  5. 软件设计之UML—UML的构成[上]

      UML是一种通用的建模语言,其表达能力相当的强,不仅可以用于软件系统的建模,而且可用于业务建模以及其它非软件系统建模.UML综合了各种面向对象方法与表示法的优点,至提出之日起就受到了广泛的重视并得 ...

  6. JavaMail发送邮件时判断发送结果1.5.x

    经常有用户在平台乱注册帐号,系统得自动清理.现在要判断一下邮件是否正确少了很多垃圾注册用户了. 测试 http://sms.reyo.cn/user/register 感谢您的反溃信息!!! 程序代码 ...

  7. [sicp]huffman编码的实现 @ Scheme

    #lang racket (define (length items) (if (null? items) (+ (length (cdr items))))) (define (element-of ...

  8. Openresty 安装教程

    Openresty的简单安装方法,如需高级编译安装,请参照安装选项 1.安装配置好Yum源,不赘述此步骤 2.安装必要组件 yum install pcre-devel openssl-devel g ...

  9. [Aaronyang] 写给自己的WPF4.5 笔记20 [3d课 1/4]

    假设你是高中毕业的,ok,数学知识几何知识中,我们学过  x,y,z   3个轴然后就可以画出形状了. 1. 新建空白窗体,grid换成canvas,然后新增一个Viewport3D元素 3d中显示的 ...

  10. apache 80端口部属多站点配置

    1.在httpd.conf文件里启用虚拟主机功能,即去掉下面配置项前面的# #LoadModule vhost_alias_module modules/mod_vhost_alias.so 2..在 ...