<!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> /* 外层div在body水平垂直居中 */ .outter { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #000; width: 500px; height: 500px; } /* 内层div相对于外层div水平垂直居中 */ .inner { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; border: 1px solid #000; } </style> </head> <body> <div class="outter"> <div class="inner"></div> </div> </body> </html>