一.已知宽高
1. 子元素+vertical-align,display: inline-block 父元素+line-height,text-align
.a1 {
width: 800px;
height: 800px;
background: orange;
text-align: center;
line-height: 800px;
}
.a2 {
width: 300px;
height: 300px;
background: blue;
vertical-align: middle;
display: inline-block;
}
2.用定位position, margin: auto; 父元素给relative 子元素给absolute
.a1 {
width: 800px;
height: 800px;
background: orange;
position: relative;
}
.a2 {
width: 300px;
height: 300px;
background: blue;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
}
3.positon+calc函数
.a1 {
width: 800px;
height: 800px;
background: orange;
position: relative;
}
.a2 {
width: 300px;
height: 300px;
background: blue;
position: absolute;
top: calc(50% - 300px / 2);
left: calc(50% - 300px / 2);
}
4. position+margin-top+margin-left
.a1 {
width: 800px;
height: 800px;
background: orange;
position: relative;
}
.a2 {
width: 300px;
height: 300px;
background: blue;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
}
二.宽高未知
1.position+translate
.a1 {
width: 600px;
height: 600px;
background: orange;
position: relative;
}
.a2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
2. 弹性盒flex
.a1 {
width: 600px;
height: 600px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.a2 {
width: 100px;
height: 100px;
background-color: blue;
}
3.弹性盒flex-box 子元素margin:auto;
.a1 {
width: 600px;
height: 600px;
background: orange;
display: flex;
}
.a2 {
width: 100px;
height: 100px;
background-color: blue;
margin: auto;
}
4.table-cell
.a1 {
width: 600px;
height: 600px;
background: orange;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.a2 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}