尽管有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. 【java开发】ubuntu常用命令及环境搭建

    学习第一天,今天内容相对简单,主要就是ubuntu一些常用命令及常规操作,后续涉及到环境的搭建,也会在本文再更. ubuntu环境搭建 第一种 也是最简单最方便的 通过vm虚拟机软件,下载iso镜像进 ...

  2. HOLOLENS 扫描特效 及得出扫描结果(SurfacePlane)

    HOLOLENS 扫描特效 及得出扫描结果(SurfacePlane) 要求只扫出地板和墙, 由于地板和墙面积较大 扫描结果 HOLOTOOLKIT老版本点在参数调节PlaneFinding.Find ...

  3. oracle函数

    oracle中函数分为3大类,分别为:单行函数,分组函数,分析函数. 1.单行函数 单行函数同时只能对一行进行操作,且对输入的每一行返回一行输出结果. 单行函数还分为:字符函数,数子函数,日期函数,转 ...

  4. [LeetCode] Implement Stack using Queues 用队列来实现栈

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  5. 微信支付（.NET版）

    前段时间做了网页版微信支付,遇到很多问题,不过最终还是解决了,现在在这里记录下开发流程以及说明,给其他人一些参考. 一.准备工作     首先肯定得先要开通微信支付功能,之前开通微信支付需要三万的押金 ...

  6. linux系统下使用流行的版本管理工具 Git

    前几天被版本管理困扰了好久,主要是因为 没法回到之前的版本,新版本又出了问题真的很尴尬. 终于决定使用目前网上很火的版本管理工具-------Git 历史啥的就不说了,说些有用的. 我用的是oschi ...

  7. ECharts学习（4）--仪表盘

    1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...

  8. NC 销售订单

    主表:so_sale,主键:csaleid 子表1:so_saleorder_b 主键:corder_bid 子表2:so_saleexecute 主键:csale_bid 要求子表1和子表2 主键相 ...

  9. [转]如何设置eclipse中js默认打开为java Editor

    打开window-preference -> General-Editors-File Associator 看到右边的.js下边就是设置默认打开方式了 转自百度知道:http://zhidao ...

  10. jQuery的页面载入

    jQuery 页面载入 $(document).ready(function(){ //程序段 }) 原生javaScript window.onload = function(){ //程序段 } ...