自己写的一个比较好看的居中盒子:
核心的点是视口宽高50%,然后变换盒子宽高-50%,就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子居中</title>
<style>
div {
position: fixed;
border: 1px solid #ebebeb;
top: 50%;
left: 50%;
background-color: aliceblue;
box-shadow: 0px 0px 20px #dddd;
transform: translate(-50%,-50%);
min-height: 350px;
width: 400px;
border-radius: 15px;
}
</style>
</head>
<body>
<div>
this is a box!!
</div>
</body>
</html>