CSS, CSS2, 網頁設計

[CSS]網頁標準化實現Div垂直、水平都居中

梅干2008/11/22
  網頁標準化後透過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>


[範例預覽]
UAG軍規iPhone防摔殼