方案一：
初始化网页的宽度和高度，div可在浏览器窗口大小改变时，依旧居中！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .container{ width: 200px; height: 200px; margin: 0 auto; position: relative;//设置div可移动 background: greenyellow; top: 50%;margin-top: -100px; } </style> </head> <body> <div class="container"> </div> </body> </html>
方案二：将margin-top属性改为CSS3中的 transform: translateY(-50%); 使div位置向上移动自身高度的50%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .container{ width: 200px; height: 200px; margin: 0 auto; position: relative; background: greenyellow; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="container"> </div> </body> </html>
方案三：body开启弹性盒子布局，设置相关属性即可使DIV完成水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; } .container{ width: 200px; height: 200px; background: greenyellow; } </style> </head> <body> <div class="container"> </div> </body> </html>