尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

<html>
<head>
<title>CSS未知高度的DIV垂直居中</title>
<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;}
div.greenBorder {border: 1px solid green; background-color: ivory;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
qee<br/>qee<br/>qee<br/>qee<br/>qee<br/>qee<br/>
</div>
</div>
</div>
</body>
</html>

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

CSS解决未知高度垂直居中的更多相关文章

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

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

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

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

  3. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

  4. css未知高度垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

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

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

  6. 用CSS让未知高度内容垂直方向居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  7. css 实现未知图片垂直居中

    1.demo html部分 <div class="demo">      <a href="#"><img src=" ...

  8. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  9. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. win8改win7笔记

    内存<=4G,选32位(×86)   内存>=4G,选64位(×64)   (非必须) BIOS设置    USB Boot Support     Disabled改为Enabled(如 ...

  2. JSP动作元素——————实践篇

    本篇在理论的基础上实现不同JSP页面间的跳转 使用 Eclipse Java EE IDE 创建一个新的 Java Web 项目,具体步骤如下: (1)启动 Eclipse Java EE IDE,在 ...

  3. JS和JSON的区别

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,JSON格式的数据,主要是为了跨平台交流数据用的.但JSON和JavaScript确实存在渊源,可以说这种数 ...

  4. BZOJ1500[NOI2005]维修数列

    Description Input 输入的第1 行包含两个数N 和M(M ≤20 000),N 表示初始时数列中数的个数,M表示要进行的操作数目.第2行包含N个数字,描述初始时的数列.以下M行,每行一 ...

  5. IE10 IE11 中 网站无法登录问题cookie

    方法一: 在程序文件中添加此文件 在项目中创建一个文件夹将下载的文件直接拖入文件夹中 来源于:http://www.hanselman.com/blog/BugAndFixASPNETFailsToD ...

  6. GO语言总结(5)——类型转换和类型断言

    上一篇博客介绍了Go语言的数组和切片——GO语言总结(4)——映射(Map),本篇博客介绍Go语言的类型转换和类型断言 由于Go语言不允许隐式类型转换.而类型转换和类型断言的本质,就是把一个类型转换到 ...

  7. [LeetCode] Binary Tree Preorder Traversal 二叉树的先序遍历

    Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...

  8. C语言学习 第十次作业总结

    同学们终于学到最有意思的东西:指针了.有人说指针是C语言的灵魂.虽然有点夸大,但是事实的确是如此.很多的时候,使用指针,会让过程变得简洁和精巧.这个在以后同学们深入学习使用C语言进行编程的时候就可以理 ...

  9. python基础-异常处理

    一.错误和异常 程序中难免出现错误,而错误分成两种 1.1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def te ...

  10. Beta版本冲刺计划及安排

    经过紧张的Alpha阶段,很多组已经从完全不熟悉语言和环境,到现在能够实现初步的功能.下一阶段即将加快编码进度,完成系统功能.强化软件工程的体会.Beta阶段的冲刺时间为期七天,安排在2016.12. ...