<!doctype html> <html> <head> <meta charset="utf-8"> <title>position & transform: translate(-50%, -50%) 实现块元素百分比下居中</title> <style> html,body { width: 100%; height: 100%; position: relative; } .box { width: 800px; height: 500px; background-color: #FFD914; } .inside { width: 60%; height: 30%; background-color: red; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="box center"> <div class="inside center"></div> </div> </body> </html>