<!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. [Python爬虫] Selenium获取百度百科旅游景点的InfoBox消息盒

    前面我讲述过如何通过BeautifulSoup获取维基百科的消息盒,同样可以通过Spider获取网站内容,最近学习了Selenium+Phantomjs后,准备利用它们获取百度百科的旅游景点消息盒(I ...

  2. 常用linux命令索引

    每天一个linux命令(61):wget命令 每天一个linux命令(60):scp命令 每天一个linux命令(59):rcp命令 每天一个linux命令(58):telnet命令 每天一个linu ...

  3. iOS系统app崩溃日志手动符号化

    iOS系统app崩溃日志手动符号化步骤: 1.在桌面建立一个crash文件夹,将symbolicatecrash工具..crash文件..dSYM文件放到该文件夹中 a.如何查询symbolicate ...

  4. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  5. C# .net中获取台式电脑中串口设备的名称

    来源:http://www.cnblogs.com/hshuzhao/p/4028856.html?utm_source=tuicool&utm_medium=referral .情境: 做项 ...

  6. Entity Framework一对多关系添加数据的两种方式

    当使用Entity Framework添加一对多关系数据的时候,通常先添加一的数据,然后再添加多的数据.类似这样: //添加一的数据 var category = new Category{Name= ...

  7. libev代码

    就是贴上来: ev.c: /* * libev event processing core, watcher management */ /* this big block deduces confi ...

  8. oracle 判断中文函数

    create or replace function func_chinese(  p_str     in varchar2,     -- 输入的字符串  p_code    in varchar ...

  9. asp.net mvc 动态显示不同的部分视图

    首先是AJAX请求 //第一次打开 默认s单行文本 $.ajax({ type: "GET", url: "/Admin/Field/ChoiceType4Edit&qu ...

  10. iOS开发——项目实战总结&关于随机量

    关于随机量 rand 是一个标准的 C 函数. random 是定义为 POSIX 标准的一部分. arc4random 是在 BSD 和派生平台. 随机数 arc4random_uniform(N) ...