<head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /*1660及以上*/ .box { background-color: #ccc; border-radius: 5px; width: 500px; height: 695px; right: 127px; position: absolute; transform: scale(calc(1920 / 1660)) translateY(-50%); transform-origin: left top; top:50%; /* 上下居中后 顶91 底114 偏移量 (114 - 91) / 2 */ margin-top: -11.5px; } /*1440-1660*/ @media screen and (max-width: 1661px) { .box { transform: scale(calc(1660 / 1440)) translateY(-50%); } } /*1366-1440*/ @media screen and (max-width: 1441px) { .box { transform: scale(1) translateY(-50%); } } /*1367及以下*/ @media screen and (max-width: 1367px) { .box { transform: scale(calc(1366 / 1440)) translateY(-50%); } } </style> </head> <body> <div class="box"></div> </body>xxxxxxxxxx