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>
(看完,对你有帮助的话,加个关注哦,谢谢你的支持~)