尽管有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. [数据分析]excel带名称的四象限散点图制作

    本文前言:方法来至Excel图表之道这本数,偶然看到,好久没出数据分析的文章了,也难怪最近几个月都忙作网页,数据分析自己也就用excell和sql 正文: 带象限的散点图效果如下: 看到图片,这里制作 ...

  2. java日志组件介绍（common-logging，log4j，slf4j，logback ）

    转自:http://www.blogjava.net/daiyongzhi/archive/2014/04/13/412364.html common-logging是apache提供的一个通用的日志 ...

  3. hdu1032 Train Problem II (卡特兰数)

    题意: 给你一个数n,表示有n辆火车,编号从1到n,入站,问你有多少种出站的可能.    (题于文末) 知识点: ps:百度百科的卡特兰数讲的不错,注意看其参考的博客. 卡特兰数(Catalan):前 ...

  4. 基于pcDuino-V2的无线视频智能小车

    这段时间抽空做了个智能视频小车.包含了pid电机控制.socket网络编程.多线程编程.epoll机制.gtk图形界面编程. 这是界面: 小车的底层是用的stm32f405系列的单片机+电机驱动做的一 ...

  5. BZOJ 1415 【NOI2005】 聪聪和可可

    题目链接:聪聪和可可 一道水题--开始还看错题了,以为边带权--强行\(O(n^3)\)预处理-- 首先,我们显然可以预处理出一个数组\(p[u][v]\)表示可可在点\(u\),聪聪在点\(v\)的 ...

  6. [LeetCode] Binary Search Tree Iterator 二叉搜索树迭代器

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  7. [LeetCode] Copy List with Random Pointer 拷贝带有随机指针的链表

    A linked list is given such that each node contains an additional random pointer which could point t ...

  8. [LeetCode] Merge k Sorted Lists 合并k个有序链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 这 ...

  9. Todo list and 学习心得

    1. 理论实践要区分起来学习,结合起来运用. 2. 内事不决问百度外事不决问谷歌 3. 一个人走的快,一群人走得远或者更快 2016-09-01 23:27:58  九月目标:对程序从编译到执行的整个 ...

  10. python网络编程-TCP协议中的三次握手和四次挥手(图解)

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...