内容居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .auth-wrap { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, 0.3); text-align: center; } .auth-wrap::after { content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle; } .message-box { display: inline-block; width: 420px; height: 300px; vertical-align: middle; background-color: #fff; border-radius: 4px; border: 1px solid #ebeef5; font-size: 18px; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); text-align: left; overflow: hidden; backface-visibility: hidden; } </style> </head> <body> <div class="auth-wrap"> <div class="message-box"></div> </div> </body> </html>