網頁標準化後透過CSS設定可輕易的將Div水平居中，但各位應該也有發現到，若要實現讓Div垂直居中，卻比登天還難，怎麼試怎麼不行，除非把網頁標準化的宣告去除，這問題也困擾了我許久，總算皇天不負苦心人，辛苦是有代價的，終算讓我給找到符合網頁標準化後又可達到Div垂值居中的方法。
垂直居中語法
☞ CSS語法：
<style type="text/CSS"><!–
body,html{
padding:0;
margin:0;
height:100%;
}
.outer {
overflow:hidden;
position:relative;
width:100%;
height:100%;
background-color: #CCCCCC;
}
.outer[class] { /* for firefox /
display:table;
position: static;
}
.middle { / for explorer only/
position:absolute;
top:50%;
}
.middle[class] { / for firefox /
display:table-cell;
vertical-align:middle;
position: static;
}
.inner{ / for explorer only */
position: relative;
top: -50%;
width: 100px;
height:100px;
margin: 0 auto;
}
div.border {
border: 2px solid #666666;
background-color:#FFFFFF;
}
–></style>☞ Body下：
<div class="outer">
<div class="middle">
<div class="inner border"><img src="man.gif" /></div>
</div>
</div>
[範例預覽]