<!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. xml Schema import

    first_.xsd <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs=& ...

  2. Ubuntu SVN客户端安装

    查看系统版本: uname -a (Linux查看版本当前操作系统内核信息) cat /proc/version (Linux查看当前操作系统版本信息) 1.首先需要安装Ubuntu SVN.Ubun ...

  3. 01_JavaScript简介

    js用途 前端三层 结构层 HTML 从主义角度描述页面的结构 样式层 CSS 从审美的角度装饰页面 行为层 JS 从交互角度提升体验 HTML 里面的 b(加粗)/i(倾斜)/u(下划线)等标签由于 ...

  4. Atitit.现实生活中最好使用的排序方法-----ati排序法总结

    Atitit.现实生活中最好使用的排序方法-----ati排序法总结 1. 现在的问题 1 2. 排序的类别::插入排序//交换排序//选择排序(每次最小/大排在相应的位置  )//归并排序//基数排 ...

  5. Javascript入门学习

    编程之道,程序员不仅仅要精通一门语言,而是要多学习几门. 本学习之源出自柠檬学院http://www.bjlemon.com/,特此声明. 第一课1:javascript的主要特点解释型:不需要编译, ...

  6. 吐槽C++：C++ 类成员变量初始化 之 初始化带有参数的构造函数 的类成员变量。

    本来我想写这样的代码: class MatchManager{ public: MatchManager() { } class OnTimerRunFuncHelper{ public: OnTim ...

  7. 一个优秀windows C++程序员的知识体系

    思考一个优秀windows C++ 程序员该有哪些知识,可最终发现什么知识都不能少, 看下图: 除了上面知识,程序员还要不断学习, 保持对新知识的热情. 转自http://www.cppblog.co ...

  8. HU 参考错误修正：/SCWM/RCORR_HUREF

    HU 参考错误修正:report: /SCWM/RCORR_HUREF HU 参考的ODO/ID的凭证号及行项目号不正确的修正程序.

  9. 努力学习 HTML5 （1）—— 初体验

    HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...

  10. linux crontab 文件位置和日志位置

    一.文件位置 位置一般在/var/spool/cron/下,如果你是root用户,那下面有个root文件,建议日常备份,避免误删除导致crontab 文件丢失: 二.日志文件位置 默认情况下,cron ...