第一种方法:flex布局
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
.child1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
<div class="parent">
<div class="child1"></div>
</div>
第二种方法:定位和transform
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
</style>
<div class="parent">
<div class="child1"></div>
</div>
第三种方法:定位
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="parent">
<div class="child1"></div>
</div>
第四种方法:已知div宽度 定位和margin
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div class="parent">
<div class="child1"></div>
</div>
第五种方法:网格布局
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.child1 {
width: 100px;
height: 100px;
background: red;
justify-self: center;
align-self: center;
}
</style>
<div class="parent">
<div class="child1"></div>
</div>