<!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. centos网卡错误Device eth0 does not seem to be present

    在使用vmware及VirtualBox迁移linux系统过程中,发现部署后的linux系统无法启动网卡 报错为 Bringing up interface eth0: Device eth0 doe ...

  2. 有助于提高你的 Web 开发技能的7个模式库

    正如语言风格指南一样,模式库有两个主要用途.首先,是它们提供了一组编码或设计标准,Web 开发团队可以在整个网站中应用,有助于保持一致的编码实践和外观:其次,对于要学习网页设计最佳实践来说是宝贵的财富 ...

  3. python decorator simple example

    Why we need the decorator in python ? Let's see a example: #!/usr/bin/python def fun_1(x): return x* ...

  4. 在sublime text 中的Emmet快捷键动态图演示

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  5. ecshop2.72文件结构说明

    ECShop 2.7.2 的结构图及各文件相应功能介绍 ECShop 2.7.2 upload 的目录┣ activity.php 活动列表┣ affiche.php 广告处理文件┣ affiliat ...

  6. 利用jsoup爬虫工具，爬取数据，并利用excel导出

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.FileInputStream; i ...

  7. Leetcode 172 Factorial Trailing Zeroes

    给定一个数n 求出n!的末尾0的个数. n!的末尾0产生的原因其实是n! = x * 10^m 如果能将n!是2和5相乘,那么只要统计n!约数5的个数. class Solution { public ...

  8. python中xrange和yield的用法

    相信很多人对xrange和yield都不是很清楚,网上很多文章也是写的云里雾里的,今天我用最简单的例子给大家说下. 说起xrange的时候就一定要提range,其实xrange 用法与 range 完 ...

  9. LPC43xx SGPIO DMA and Interrupts

    The SGPIO output pins SGPIO14 and SGPIO15 can trigger a GPDMA request SGPIO pins SGPIO14 and SGPIO15 ...

  10. android实现qq邮箱多个图标效果

    前几天,蛋疼的技术主管非要实现类似装一个qq邮箱,然后能够使用qq邮箱日历的那么一个东西.相当于一个应用生成两个图标,可是不同的是点击不同的图标能够进入不同的应用,例如以下图的效果. 这效果百度了一天 ...