一、絕對定位 + 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 網格佈局教程