通过设置下面的样式可以使盒子水平垂直居中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div{ height: 200px; width: 200px; background-color: red; position: absolute; top: 50%; left: 50%; margin-left: -100px;/*负数，数值是宽度的一半*/ margin-top: -100px;/*负数，数值是高度的一半*/ } </style> </head> <body> <div> </div> </body> </html>
效果：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>设置盒子水平垂直居中</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .bg{ width: 100%; height: 100%; background: #000000; background: rgba(0, 0, 0, 0.5); background: #000000; filter: alpha(opacity=30); opacity: 0.3; position: absolute; left: 0px; top: 0px; } .opinion{ width: 500px; height: 330px; border: 1px solid #666666; /* margin: 0px auto;设置DIV水平居中 */ position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -165px; background: white; } .opinion h3{ margin:15px; font-size: 16px; } .opinion span{ color: green; } .opinion hr{ margin: 15px; } .opinion em{ float: right; /*向右浮动*/ width: 21px; height: 20px; background: url(images/tb.gif) no-repeat; } .opinion p{ margin: 15px; line-height: 25px; font-size: 15px; } .email,.content,.btnSubmit{ display: block; margin: 15px; } .email,.content{ width: 460px; } .email{ height: 20px; line-height: 20px; padding-left: 5px; } .content{ height: 100px; padding-left: 5px; } .btnSubmit{ width: 60px; height: 25px; background: orangered; color: white; border: 0px; cursor: pointer; } </style> </head> <body> <div class="bg"> </div> <div class="opinion"> <h3> <span>意见反馈</span> <em class="cllse"></em> </h3> <hr /> <p> 亲爱的用户，欢迎来到gwiff，我们非常希望看到您对gwiff的看法， 以便将来更好的服务到您。 </p> <div> <form action="" method="POST" id="myForm"> <input type="text" class="email" name="email" /> <textarea class="content"></textarea> <input type="button" value="提 交" class="btnSubmit"/> </form> </div> </div> </body> </html>
效果：
