Recently modified a user login page of the company, and the login box needs to be centered horizontally and vertically on the page. Because of my limited knowledge, I racked my brains and thought of using absolute positioning percentage position minus half of its own length and width to achieve it. Vertically and horizontally centered, the code is as follows;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 .test{ 9 position:absolute;10 width:200px;11 height:200px;12 background:#999;13 top:50%;14 left:50%;15 margin-top:-100px;16 margin-left:-100px;17 </style>18 </head>19 20 <body>21 22 <div class="test"></div>23 </body>24 </html>After testing, it is valid for Google, IE8, IE6, Firefox, and 360 (other browsers should go without saying)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
