- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>上下垂直居中 在线演示 DIVCSS5</title>
- <style>
- #main {position: absolute;width:400px;height:200px;left:50%;top:50%;
- margin-left:-200px;margin-top:-100px;border:1px solid #00F}
- /*css注释：为了方便截图，对CSS代码进行换行*/
- </style>
- <body>
- <div id="main">DIV水平居中和上下垂直居中</div>
- </body>
- </html>
这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边框。