文章目录
一、绝对定位 + 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 网格布局教程
七、新加的———— Grid布局之空间居中布局
不管容器的大小,项目总是占据中心点。
详细信息,请参考:只要一行代码,实现五种 CSS 经典布局
<div class="father">
<div class="item"></div>
</div>
.father {
display: grid;
place-items: center;/*核心代码*/
height: 600px;
border: 1px solid red;
}
.item {
background: lightpink;
height: 100px;
width: 100px;
}