Negative margin centering method is a more practical centering method, which is often used
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>负边距居中法</title> <style type="text/css"> body{ position: relative; background-color: #f2f2f2; width: 100%;height: 600px; } .demo{ background-color: red; width: 200px;height: 50px; position: absolute; left: 50%;top: 50%; margin-left: -100px; margin-top: -25px; } </style> </head> <body> <div class="demo"></div> </body> </html>