1、元素在屏幕中水平垂直居中（已知元素的宽高）
效果图：
实现代码：
<style>
*{
margin: 0;
padding: 0;
}
.box{
/* 已知盒子的宽度和高度 100px * 100px */
width: 100px;
height: 100px;
background: green;
/* 固定定位 */
position: fixed;
/* 水平居中，-50px等于-（width的一半） */
left: 50%;
margin-left: -50px;
/* 垂直居中，-50px等于-（height的一半） */
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
关键在于，运用了固定定位。
2、元素在盒子中水平垂直居中（盒子宽高可以任意设置）
效果图：
实现代码：
<style>
*{
margin: 0;
padding: 0;
}
.out_box{
width: 500px;
height: 500px;
border: 2px solid black;
/* 设置为参照物 */
position: relative;
}
.in_box{
width: 100px;
height: 100px;
background: blue;
/* 绝对定位 */
position: absolute;
/* 水平居中，-50px等于-（width的一半） */
left: 50%;
margin-left: -50px;
/* 垂直居中，-50px等于-（height的一半） */
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="out_box">
<div class="in_box"></div>
</div>
</body>
关键在于，运用了“子绝父相”。
3、拓展
让元素与盒子在屏幕水平垂直
效果图：
实现代码：
<style>
*{
margin: 0;
padding: 0;
}
.out_box{
width: 500px;
height: 500px;
border: 2px solid black;
/* 设置为参照物 */
position: relative;
/* 外盒子在屏幕中水平垂直居中 */
position: fixed;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -250px;
}
.in_box{
width: 100px;
height: 100px;
background: blue;
/* 绝对定位 */
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="out_box">
<div class="in_box"></div>
</div>
</body>
（看完，对你有帮助的话，加个关注哦，谢谢你的支持~）
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
