一、绝对定位 + margin，让固定宽高的盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.wangyi-loading{
width: 360px;
height: 360px;
margin:auto;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
border:5px solid red;
}
</style>
</head>
<body>
<div class="wangyi-loading"></div>
</body>
</html>
二、 绝对定位+transform:translate() ，让盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.son{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*向左，向上移它的50%*/
border:5px solid lightcoral;
}
</style>
</head>
<body>
<div class="son"> 我是居中的盒子</div>
</body>
</html>
三、父级用flex布局 ，让盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.father{
display: flex; /* 1.设置为弹性盒子 */
align-items: center; /* 2.让子项盒子纵向 居中排列 */
justify-content: center; /* 3.让子项盒子横向 居中排列 */
border:2px solid green;
height:100vh;
}
.son{
border:5px solid lightcoral;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
盒子居中
</div>
</div>
</body>
</html>
四 、父级flex布局 + 子级margin:auto，让盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.father{
display: flex; /* 1. 父级flex布局 */
border:2px solid green;
height:100vh;
}
.son{
border:5px solid lightcoral;
margin: auto; /* 2. 子级margin：auto auto; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">我就是那个居中的盒子</div>
</div>
</body>
</html>
五 、父级display: table-cell + 子级margin:0 auto，让盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.father{
display: table-cell; /* 1. 指定元素为 表格单元格（table-cell） */
vertical-align: middle; /* 2. 指定行内元素（inline）或表格单元格（table-cell）元素垂直居中对齐。 */
border:2px solid green;
height:100vh;
width: 100vw;
}
.son{
border:5px solid lightcoral;
width: 200px; /* 若不设置宽度，会自动撑为100% */
margin: 0 auto; /* 3. 控制横向居中 */
}
</style>
</head>
<body>
<div class="father">
<div class="son">我就是那个居中的盒子</div>
</div>
</body>
</html>
六 、父级网格布局display:grid + 子级grid-area指定项目位置，让盒子水平垂直居中于窗口
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.father {
display: grid; /* 1. 指定容器采用网格布局*/
grid-template-rows: 1fr 100px 1fr; /* 2. 定义3行，中间那个100px为所需居中的盒子高度 */
grid-template-columns: 1fr 100px 1fr; /* 3. 定义3列，中间那个100px为所需居中的盒子宽度 */
border: 2px solid green;
height: 100vh;
width: 100vw;
}
.son {
border: 5px solid lightcoral;
grid-area: 2/2/3/3; /* 以网格线为基准，指定项目位置 ，上左下右,第一个2表示横向第二根线条， grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">我就是那个居中的盒子</div>
</div>
</body>
</html>
关于网格布局的更多信息，可参考：CSS Grid 网格布局教程