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

梅干 2008/11/22 1 分鐘閱讀

　　網頁標準化後透過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>