CSSは未知の高さのDIV垂直中央を解決する

CSSのvertical-align特性があるにもかかわらず、未知の高さの垂直中心問題(DIVラベルに未知の高さのテキストや画像がある場合)を効果的に解決することはできません.Mozilla、Opera、Safariなどの標準ブラウザ.親要素の表示方式をTABLE(display:table;)に設定し、内部サブエレメントはtable-cell(display:table-cell)と定められ、vertical-align特性によって垂直に中央に配置されますが、標準ブラウザではサポートされていません.
非標準ブラウザでは、サブエレメントに上部から50%しか設定できません.上部から50%のエレメントを追加して相殺します.
CSS

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%;
}
/* for explorer only*/
#middle[id] {
	display: table-cell;
	vertical-align: middle;
	position: static;
}
#inner {
	position: relative;
	top: -50%;
	width: 400px;
	margin: 0 auto;
}
/* for explorer only */
div.greenBorder {
	border: 1px solid green;
	background-color: ivory;
}

XHTML

<div id="outer">
	<div id="middle">
		<div id="inner" class="greenBorder">123</div>
	</div>
</div>

以上のCSSコードの利点はhacksがなく、IEがサポートしていないCSS 2セレクタ#value[id]を採用していることである.
CSS 2セレクタ#value[id]はセレクタ#valueに相当するが、Internet Explorerではこのタイプのセレクタはサポートされていない.同じようにvalue[class],相当于.value、これらは標準ブラウザでしか読めません.
テスト:Firefox 1.5、Opera9.0、IE6.0、IE5.0が通過します.