用CSS將網頁的內容水平與垂直置中

有時候我們想讓網頁的內容隨著使用者將瀏覽器的範圍放大或縮小，都可以自動置中；如果用表格的話，其實就可以很簡單的做到這個功能，但使用CSS來建構網頁會比透過表格的方法來得好多了！因為CSS不但在語義上，甚至是各種控制的方式都比表格靈活許多！

以底下這個例子來說，我們要將網頁的內容放進div裡，設定div的id為"theDiv"，假如寬、高為800px、450px，那麼我們也得將寬高指定進來！透過position為absolute的方法，指定div的位置在垂直與水平皆為50%；由於絕對定位(position:absolute)是以div的左上角為依據，所以這個時候位置並不是直正的水平與垂直置中，我們還得透過指定margin(邊界)的方式來達到這個功能，也就是將寬、高各減去一半(寬減去450/2=225px，高減去800/2=400px)，這樣就會自動的水平與垂直置中了：

#theDiv {
height: 450px; /* div的高度 */
width: 800px;/* div的寬度 */
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -400px;/* 邊界減去一半的寬高 */
}

也許CSS有其它方法能做到類似的功能，不過這個方法算是滿簡單易懂的就是了。