<!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. 【系统移植】Android系统移植

    $ . .. Device     . SimulatorWhich would you like] Build type choices are. release     . debugWhich ...

  2. Atitit.api参数传递的设计

    Atitit.api参数传递的设计 · 引言 · 形参和实参 · 命名实参 · 可选参数 · params,数目可变参数 · 方法解析与重载决策 · 参数传递      [重难点] · ref引用参数 ...

  3. paip.python NameError name 'xxx' is not defined\

    paip.python NameError name 'xxx' is not defined\ 导入一个另一个文件里面的函数的时候儿,出孪这个err #这个仅仅导入孪file...要使用里面的fun ...

  4. Activity后台运行一段时间回来crash问题的分析与解决

    最近做项目的时候碰到一个棘手的问题,花了不少时间才找到原因并解决.特此记录这个被我踩过的坑,希望其他朋友遇到此问题不要调到这坑里去了. 问题描述: 1.背景:我的app中某个界面的Activity是继 ...

  5. Bitmap和Drawable相互转换方法

    很多开发者表示,不知道Android的Drawable和Bitmap之间如何相关转换.下面给大家两种比较简单高效的方法. 一.Bitmap转Drawable Bitmap bm=xxx; //xxx根 ...

  6. ios取证

    摘录自:<IOS取证实战> Andrew Hoog著 viaForensics公司,今年已经募集到1600万创业基金 2007-2011年初,AT&T是在美国唯一为iphone提供 ...

  7. 【Android开发坑系列】之PopupWindow

    PopupWindow在4.0之前的版本有个系统级别的BUG,必须借助一段自定义的fix代码来修复.其中mPopPm就是PopupWindow实例.java.lang.NullPointerExcep ...

  8. 最新版ffmpeg源码分析

    最新版ffmpeg源码分析一:框架 (ffmpeg v0.9) 框架 最新版的ffmpeg中发现了一个新的东西:avconv,而且ffmpeg.c与avconv.c一个模样,一研究才发现是libav下 ...

  9. hibernate 映射 多对一

    一对多和上文讲的多对一两种映射关系,其实就是站在相反的角度考虑同样的事情. 一对多和多对一映射原理是一样的,都在多的一端加入一个外键指向一的一端.也就是说,在关系数据库的表中,他们的表及表字段都是一样 ...

  10. R语言之中文分词：实例

    一.说明 网上提供的一个例子,做了修改与订正. 二.程序 #调入分词的库 library("rJava") library("Rwordseg") #调入绘制词 ...