takeasy

用CSS實現網頁垂直置中

在設計頁面佈局的時候，我們很可能需要到一些內容可以達到垂直置中。如果使用<table>裏面的valign屬性，那很容易達到內容的垂直置中。但使用<table>的缺點就是，你很可能就為了達到垂直置中，就弄了一個煩人的表格框架。以下是其中一個解決方法，純CSS實現頁面的垂直居中。

1. HTML代碼

<div id="container">
 <div id="position">
  <div id="content">
  Text Here.
  </div>
 </div>
</div>

2. CSS代碼

<STYLE type="text/css">
 #container { width: 100%; height: 100%; display: table; }
 #position { display: table-cell; vertical-align: middle; 
width: 100%; text-align: center; }
</STYLE>

這串CSS代碼，幾乎支持所有的browser （除了IE之外），所以需要對IE進行一個小小的Hack
3. 對IE的Hack

<!--[if IE]>
<STYLE type="text/css">
 #container { position: relative; }
 #position { position: absolute; top: 50%; }
 #content { position: relative; top: -50%; }
</STYLE>
<![endif]–>

按這裏查看 Demo 或 下載 。