今天小编跟大家讲解下有关使用css实现div垂直居中的示例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用css实现div垂直居中的示例 的相关资料,希望小伙伴们看了有所帮助。
复制代码代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS实现div居中</title> <style> #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; text-align: center; line-height:100px; } </style> <body> <div id="main"> <div id="content"> Sun </div> </div> </body> </html>
来源:爱蒂网