1.利用定位 + margin:auto
2.flex布局
3.grid布局
一、利用position+margin:auto
<style>
.outer {
position: relative; /*父亲相对定位*/
width: 200px;
height: 200px;
background-color: red;
}
.inner {
position: absolute; /*儿子绝对定位*/
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto; /*上下左右外边距为auto*/
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
二、利用flex
<style>
.outer {
display: flex; /*弹性布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
width: 200px;
height: 200px;
background-color: red;
}
.inner {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
三、gird布局
<style>
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
</style>
<div class="father">
<div class="son"></div>
</div>