实现子元素的水平垂直居中是一种很常用的需求，本文就来讲解一下如何使用相对定位和绝对定位来实现子元素的水平和垂直居中。
请看如下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用相对定位和绝对定位来实现子元素的水平垂直居中</title>
</head>
<style>
.box{
width:500px;
height:500px;
background:#0f0;
position: relative;
}
.box1{
width:200px;
height:200px;
background:#f00;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
显示效果如下：
解释一下：
首先我们给父元素设置了position: relative;相对定位，然后又给子元素设置了position:absolute;绝对定位，然后将子元素向右偏移50%，向下偏移50%，此时，子元素的左边距离父元素的左边为父元素尺寸的50%，顶边同理。所以，如果我们想让子元素居中，就需要使用外边距缩减其占位空间为子元素长宽的一半。
以上逻辑是个固定模式，实在理解不了记住即可。
|
窥视卡
雷达卡
发表于 2023-2-1 15:45:04
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 18:26:38
