1.使用相对定位和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 200px;
margin: 50px auto;
background-color: #E3E1E2;
position: relative;
}
.item{
width: 80px;
height: 80px;
background-color: #D2388F;
position: absolute;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
效果图如下:
2.使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 200px;
margin: 100px auto;
background-color: #E3E1E2;
display: flex;
justify-content: center;
align-items: center;
}
.item{
width: 80px;
height: 80px;
background-color: #D2388F;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
效果图和方法1的效果图是一样的,此处就不截图了
比较上述方法可以发现,使用flex布局比绝对,相对定位要简单一些