div垂直水平居中代碼實例:本章節分享一段代碼實例，它演示瞭如何讓div實現全屏垂直水平居中和指定元素的內容垂直水平居中。代碼實例如下:螞蟻部落 以上代碼實現了我們的要求，能夠實現居中效果，代碼比較簡單，就是基本的邏輯問題。原文地址是:http://www.softwhy.com/forum.ph....
div垂直水平居中代碼實例:
本章節分享一段代碼實例，它演示瞭如何讓div實現全屏垂直水平居中和指定元素的內容垂直水平居中。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #main{ position:absolute; background-color: blue; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F; } #content{ position:absolute; background-color:yellow; width:200px; height:100px; left:50%; top:50%; margin-left:-100px; margin-top:-50px; } </style> <body> <div id="main"> <div id="content"></div> </div> </body> </html>
以上代碼實現了我們的要求，能夠實現居中效果，代碼比較簡單，就是基本的邏輯問題。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13332
更多內容可以參閱:http://www.softwhy.com/divcss/
