調整視窗大小也能夠實現div水平垂直居中代碼實例:將一個div在視窗內實現居中效果，基本上沒有什麼難度，具體可以參閱CSS實現div屏幕居中效果代碼一章節。但是有時候我們可能會有這樣的需求，就是在調整視窗大小的情況下也能夠實現div垂直水平居中效果，下麵通過代碼實例做一下簡單介紹,代碼如下: ...
調整視窗大小也能夠實現div水平垂直居中代碼實例:
將一個div在視窗內實現居中效果，基本上沒有什麼難度，具體可以參閱CSS實現div屏幕居中效果代碼一章節。
但是有時候我們可能會有這樣的需求，就是在調整視窗大小的情況下也能夠實現div垂直水平居中效果，下麵通過代碼實例做一下簡單介紹,代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #thediv{ width:200px; height:100px; background:green; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px; } </style> </head> <body> <div id="thediv"></div> </body> </html>
上面的代碼實現了我們的要求，因為div採用的是絕對定位，並且採用百分比的方式來確定div的基本位置，不是採用固定尺寸的方式，然後在使用外邊距向回調整一定的距離，這樣就實現了居中效果，同時調整瀏覽器視窗也會實現一直居中的效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14354
更多內容可以參閱:http://www.softwhy.com/divcss/
