css實現的div垂直居中效果代碼實例:關於div垂直居中效果,在網上已經有很多介紹了。本章節再來通過代碼實例演示一下如何實現此效果,希望能夠給需要的朋友帶來幫助。代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta
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"> #box{ width:400px; height:200px; background:#CCC; position:relative; } #inner{ width:50px; height:50px; background:green; position:absolute; left:50%; top:50%; margin-left:-25px; margin-top:-25px; } </style> </head> <body> <div id="box"> <div id="inner"></div> </div> </body> </html>
上面的代碼非常的簡單,這裡就不多介紹了,如有任何問題可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16811
更多內容可以參閱:http://www.softwhy.com/divcss/